React Native: Jak wybrać następny TextInput po naciśnięciu przycisku klawiatury „next”?

201

Zdefiniowałem dwa pola TextInput w następujący sposób:

<TextInput 
   style = {styles.titleInput}
   returnKeyType = {"next"}
   autoFocus = {true}
   placeholder = "Title" />
<TextInput
   style = {styles.descriptionInput}          
   multiline = {true}
   maxLength = {200}
   placeholder = "Description" />

Ale po naciśnięciu przycisku „Dalej” na klawiaturze moja reagująca aplikacja nie przeskakuje do drugiego pola TextInput. Jak mogę to osiągnąć?

Dzięki!

andreaswienes
źródło
Odpowiedź Mitcha (obecnie trzecia w dół) działa dla mnie na v0.42.
Lawrence
Osobom z React v16.8.0lub wyższym polecam odpowiedź udzieloną przez @Eli Johnson na samym dole. React wycofał wiele zastosowań refdostarczonych w poniższych rozwiązaniach.
thedeg123

Odpowiedzi:

331

Ustaw drugą TextInputostrość, gdy poprzednia TextInput„s onSubmitEditingjest wyzwalany.

Spróbuj tego

  1. Dodanie odwołania do drugiego TextInput
    ref={(input) => { this.secondTextInput = input; }}

  2. Powiąż funkcję fokusa z pierwszym zdarzeniem onSubmitEditing TextInput .
    onSubmitEditing={() => { this.secondTextInput.focus(); }}

  3. Pamiętaj, aby ustawić blurOnSubmit na false, aby zapobiec migotaniu klawiatury.
    blurOnSubmit={false}

Po zakończeniu wszystko powinno wyglądać tak.

<TextInput
    placeholder="FirstTextInput"
    returnKeyType="next"
    onSubmitEditing={() => { this.secondTextInput.focus(); }}
    blurOnSubmit={false}
/>

<TextInput
    ref={(input) => { this.secondTextInput = input; }}
    placeholder="secondTextInput"
/>
znudzone gry
źródło
53
Warto wspomnieć, że onSubmitEditingwywołanie zwrotne jest wywoływane po blurzdarzeniu. Klawiatura może więc zwariować, jeśli natychmiast skoncentruje się na następnym elemencie. Pomocne może być ustawienie blurOnSubmit={false}wszystkich elementów w formie, ale pozostawienie truena ostatnim elemencie, aby przycisk Gotowe mógł zatrzeć ostatnie wejście.
e1dar
9
To już nie działa, od wersji 0.36. Nie ma metody „koncentracji” na komponencie. Jak powinniśmy to teraz zrobić?
Mitch
4
@Mitch działa dobrze na 0.40.0. Być może w wersji, w której korzystałeś, był błąd.
vikki
3
Używając RN 0.49, dodanie, blurOnSubmit={false}aby zapobiec migotaniu klawiatury, spowodowało, że przestało to działać, ktoś wie, co się dzieje?
nabil london
13
Dla każdego, kto nie był w stanie wykonać focuspracy, upewnij się, że nie używasz opakowania dla TextInputkomponentu. Jeśli masz CustomTextInputkomponent say , który się zawija TextInput, musisz zaimplementować TextInputmetody rozmycia i fokusa dla tego komponentu, aby działał zgodnie z oczekiwaniami.
Cihad Turhan
65

Możesz to zrobić bez użycia referencji . Takie podejście jest preferowane, ponieważ referencje mogą prowadzić do kruchego kodu . Dokumenty React zalecają znalezienie innych rozwiązań tam, gdzie to możliwe:

Jeśli nie zaprogramowałeś kilku aplikacji za pomocą React, twoją pierwszą skłonnością będzie zazwyczaj próba użycia referencji, aby „sprawić, że coś się stanie” w Twojej aplikacji. Jeśli tak jest, poświęć chwilę i zastanów się bardziej krytycznie, gdzie stan powinien być własnością w hierarchii komponentów. Często staje się jasne, że właściwe miejsce do „posiadania” tego stanu znajduje się na wyższym poziomie w hierarchii. Umieszczenie tam stanu często eliminuje chęć użycia referencji, aby „sprawić, że coś się stanie” - zamiast tego przepływ danych zwykle osiągnie twój cel.

Zamiast tego użyjemy zmiennej stanu do skupienia drugiego pola wejściowego.

  1. Dodaj zmienną stanu, którą przekażemy jako rekwizyt do DescriptionInput:

    initialState() {
      return {
        focusDescriptionInput: false,
      };
    }
  2. Zdefiniuj metodę modułu obsługi, która ustawi tę zmienną stanu na true:

    handleTitleInputSubmit() {
      this.setState(focusDescriptionInput: true);
    }
  3. Po przesłaniu / naciśnięciu enter / next na TitleInput, zadzwonimy handleTitleInputSubmit. To ustawi się focusDescriptionInputna true.

    <TextInput 
       style = {styles.titleInput}
       returnKeyType = {"next"}
       autoFocus = {true}
       placeholder = "Title" 
       onSubmitEditing={this.handleTitleInputSubmit}
    />
  4. DescriptionInput„s focusprop jest ustawiona na naszej focusDescriptionInputzmiennej stanu. Tak więc, gdy focusDescriptionInputzmiany (w kroku 3) DescriptionInputzostaną ponownie renderowane za pomocą focus={true}.

    <TextInput
       style = {styles.descriptionInput}          
       multiline = {true}
       maxLength = {200}
       placeholder = "Description" 
       focus={this.state.focusDescriptionInput}
    />

Jest to dobry sposób na uniknięcie używania referencji, ponieważ referencje mogą prowadzić do bardziej delikatnego kodu :)

EDYCJA: h / t do @LaneRettig za wskazanie, że musisz owinąć React Native TextInput kilkoma dodanymi rekwizytami i metodami, aby uzyskać odpowiedź na focus:

    // Props:
    static propTypes = { 
        focus: PropTypes.bool,
    } 

    static defaultProps = { 
        focus: false,
    } 

    // Methods:
    focus() {
        this._component.focus(); 
    } 

    componentWillReceiveProps(nextProps) {
        const {focus} = nextProps; 

        focus && this.focus(); 
    }
Stedman Blake
źródło
2
@LaneRettig Masz całkowitą rację - dzięki za zwrócenie na to uwagi. Otaczamy RN TextInput kilkoma dodanymi rekwizytami i metodami - proszę zobaczyć odpowiedź na dole z tymi dodatkami i dać mi znać, jeśli masz jakieś dalsze problemy!
Stedman Blake
4
Chłodny. Powinieneś przesłać to jako PR do RN. Dziwi mnie, że to nie jest już obsługiwane po wyjęciu z pudełka.
Lane Rettig
8
co jeśli klikniesz dalej na klawiaturze, a następnie klikniesz bezpośrednio przy pierwszym wprowadzeniu? fokus wraca do drugiej, co jest złym doświadczeniem z tym rozwiązaniem
Piotr
3
Nie podoba mi się to rozwiązanie, w szczególności dlatego, że nie skaluje się ono dobrze nawet dla nieco dłuższych form 5-6 elementów, w których dla każdego elementu potrzebujesz logicznego fokusu stanu i odpowiednio nimi zarządzać.
davidgoli
9
Co ciekawe, dokumenty stwierdzają również: „Istnieje kilka dobrych przypadków użycia referencji: Zarządzanie fokusem, zaznaczaniem tekstu lub odtwarzaniem multimediów ...” W takim przypadku użycie referencji do fokusowania wprowadzania tekstu byłoby prawidłowym użyciem tego narzędzia .
Noah Allen
26

Począwszy od wersji React Native 0.36, wywoływanie focus()(jak sugerowano w kilku innych odpowiedziach) w węźle wprowadzania tekstu nie jest już obsługiwane. Zamiast tego możesz użyć TextInputStatemodułu z React Native. Stworzyłem następujący moduł pomocniczy, aby to ułatwić:

// TextInputManager
//
// Provides helper functions for managing the focus state of text
// inputs. This is a hack! You are supposed to be able to call
// "focus()" directly on TextInput nodes, but that doesn't seem
// to be working as of ReactNative 0.36
//
import { findNodeHandle } from 'react-native'
import TextInputState from 'react-native/lib/TextInputState'


export function focusTextInput(node) {
  try {
    TextInputState.focusTextInput(findNodeHandle(node))
  } catch(e) {
    console.log("Couldn't focus text input: ", e.message)
  }
}

Możesz wtedy wywołać focusTextInputfunkcję w dowolnym „ref” z TextInput. Na przykład:

...
<TextInput onSubmit={() => focusTextInput(this.refs.inputB)} />
<TextInput ref="inputB" />
...
Mitch
źródło
1
Działa świetnie, ale jeśli ktoś używa redux-form powinien zrobić coś takiego. <Field ... onSubmitEditing={() => focusTextInput(this._password)} />i ref powinno być tak<Field ... withRef refName={e => this._password = e}/>
tarkanlar
1
Musiałem użyć „onSubmitEditing”, aby to zadziałało, ale mimo to świetne rozwiązanie.
Adam Jakiela
3
Działa świetnie w 0,42.
Lawrence
1
@tarkanlar czy możesz udostępnić fragment kodu dla rozwiązania? Nie mogę się skupić, gdy używam pola redux-form Field, używając tylko TextInput, w porządku
jasan
2
calling focus() on a text input node isn't supported any more=> śmiałe roszczenie, źródło? Wywoływanie focus()działa dobrze z wersją 0.49.5 +, TextInputStatenie jest do tej pory udokumentowane focus()i blur()jest wspomniane: facebook.github.io/react-native/releases/next/docs/…
tanguy_k
21

Utworzyłem małą bibliotekę, która to robi, nie wymaga zmiany kodu poza zastąpieniem widoku opakowania i importem TextInput:

import { Form, TextInput } from 'react-native-autofocus'

export default () => (
  <Form>
    <TextInput placeholder="test" />
    <TextInput placeholder="test 2" />
  </Form>
)

https://github.com/zackify/react-native-autofocus

Szczegółowo wyjaśniono tutaj: https://zach.codes/autofocus-inputs-in-react-native/

zackify
źródło
Doskonały wzór do osiągnięcia tego wyniku. Powinna być najlepsza odpowiedź z punktu widzenia łatwości użytkowania. Wygląda na to, że mogę z łatwością edytować moje niestandardowe FormInput (rozszerzenia TextInput), aby nadal współpracować z danymi wejściowymi formularza. Zastanów się, czy dołączę to do twojej odpowiedzi, jeśli na przykład?
Jack Robson
Pewnie! Wiem ... zamieściłem to w innym popularnym poście na ten temat, ale miałem problemy z duplikatami. Próbuję tylko pomóc, ponieważ wiem, jak denerwujący jest ten problem !!
zackify
Jest to świetne, jeśli masz kilka TextInputs zaraz po sobie, ale jeśli chcesz dodać styl między nimi, to się psuje. Dzięki za wkład.
GenericJam
Dostosuj kod. Jestem pewien, że możesz zrobić sposób, który pomija elementy, które nie są wprowadzaniem tekstu. Nie powinno to być zbyt trudne.
zackify
1
Nie buduje się go dla produkcji [email protected]
Phil Andrews
18

Myślałem, że podzielę się moim rozwiązaniem za pomocą komponentu funkcyjnego ... „ to ” nie jest potrzebne!

Reaguj 16.12.0 i React Native 0.61.5

Oto przykład mojego komponentu:

import React, { useRef } from 'react'
...


const MyFormComponent = () => {

  const ref_input2 = useRef();
  const ref_input3 = useRef();

  return (
    <>
      <TextInput
        placeholder="Input1"
        autoFocus={true}
        returnKeyType="next"
        onSubmitEditing={() => ref_input2.current.focus()}
      />
      <TextInput
        placeholder="Input2"
        returnKeyType="next"
        onSubmitEditing={() => ref_input3.current.focus()}
        ref={ref_input2}
      />
      <TextInput
        placeholder="Input3"
        ref={ref_input3}
      />
    </>
  )
}

Nie wiem, mam nadzieję, że to komuś pomoże =)

Eli Johnson
źródło
1
nie działa. undefined nie jest obiektem oceniającym _this2.ref_input2.current, proszę o pomoc
DEEP ADHIYA
Czy możesz podać pełniejszy przykład swojego kodu?
Eli Johnson
2
może być lepsze użycie useRef w komponencie funkcjonalnym niż createRef
hyuk lee
@hyuklee Naprawdę pan ma rację, zaktualizowałem ... dziękuję za zgłoszenie się! Twoje zdrowie!
Eli Johnson
Dla tych, którzy lubią być na bieżąco z najnowszymi aktualizacjami, jest to ODPOWIEDŹ.
Jokhen
13

Używając Reaktywny natywny 0.45.1 Napotkałem również problemy przy ustawianiu ostrości na hasło TextInput po naciśnięciu klawisza Return na nazwie użytkownika TextInput.

Po wypróbowaniu większości najwyżej ocenianych rozwiązań tutaj na SO znalazłem rozwiązanie na github, które spełniło moje potrzeby: https://github.com/shoutem/ui/issues/44#issuecomment-290724642

Podsumowując:

import React, { Component } from 'react';
import { TextInput as RNTextInput } from 'react-native';

export default class TextInput extends Component {
    render() {
        const { props } = this;

        return (
            <RNTextInput
                {...props}
                ref={(input) => props.inputRef && props.inputRef(input)}
            />
        );
    }
}

A potem używam tego w ten sposób:

import React, {Component} from 'react';
import {
    View,
} from 'react-native';
import TextInput from "../../components/TextInput";

class Login extends Component {
    constructor(props) {
        super(props);
        this.passTextInput = null
    }

    render() {
        return (
            <View style={{flex:1}}>
                <TextInput
                    style={{flex:1}}
                    placeholder="Username"
                    onSubmitEditing={(event) => {
                        this.passTextInput.focus()
                    }}
                />

                <TextInput
                    style={{flex:1}}
                    placeholder="Password"
                    inputRef={(input) => {
                        this.passTextInput = input
                    }}
                />
            </View>
        )
    }
}
kuhr
źródło
Ratujesz
1
Zmieniłeś tylko nazwę refna inputRef... Możesz upuścić cały niestandardowy komponent, a Twój drugi blok kodu będzie działał w niezmienionej postaci, dopóki powrócisz do używaniaref
Jason Tolliver
9

Dla mnie na RN 0.50.3 jest to możliwe w ten sposób:

<TextInput 
  autoFocus={true} 
  onSubmitEditing={() => {this.PasswordInputRef._root.focus()}} 
/>

<TextInput ref={input => {this.PasswordInputRef = input}} />

Musisz zobaczyć this.PasswordInputRef. _root .focus ()

Wishmaster
źródło
1
Jest to specyficzne dla „natywnej bazy”
Developia
8

Jeśli używasz tak tcomb-form-nativejak ja, możesz to zrobić. Oto sztuczka: zamiast ustawiać rekwizyty TextInputbezpośrednio, robisz to za pośrednictwem options. Możesz odnieść się do pól formularza jako:

this.refs.form.getComponent('password').refs.input.focus()

Tak więc produkt końcowy wygląda mniej więcej tak:

var t = require('tcomb-form-native');
var Form = t.form.Form;

var MyForm = t.struct({
  field1:     t.String,
  field2:     t.String,
});

var MyComponent = React.createClass({

  _getFormOptions () {
    return {
      fields: {
        field1: {
          returnKeyType: 'next',
          onSubmitEditing: () => {this.refs.form.getComponent('field2').refs.input.focus()},
        },
      },
    };
  },

  render () {

    var formOptions = this._getFormOptions();

    return (
      <View style={styles.container}>
        <Form ref="form" type={MyForm} options={formOptions}/>
      </View>
    );
  },
});

(Podziękowania dla remcoanker za opublikowanie pomysłu tutaj: https://github.com/gcanti/tcomb-form-native/issues/96 )

Lane Rettig
źródło
jak mogę wywołać funkcję onSubmitEditing? na przykład: chcę wywołać funkcję login (), gdy użytkownik naciśnie klawisz return ostatniego typu textinput „gotowe”.
chetan
7

Tak to osiągnąłem. W poniższym przykładzie wykorzystano interfejs API React.createRef () wprowadzony w React 16.3.

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.secondTextInputRef = React.createRef();
  }

  render() {
    return(
        <View>
            <TextInput
                placeholder = "FirstTextInput"
                returnKeyType="next"
                onSubmitEditing={() => { this.secondTextInputRef.current.focus(); }}
            />
            <TextInput
                ref={this.secondTextInputRef}
                placeholder = "secondTextInput"
            />
        </View>
    );
  }
}

Myślę, że to ci pomoże.

Janaka Pushpakumara
źródło
jaki jest cel .current?
Adam Katz,
5

Mój scenariusz to <CustomBoladonesTextInput /> zawijanie RN <TextInput /> .

Rozwiązałem ten problem w następujący sposób:

Mój formularz wygląda następująco:

  <CustomBoladonesTextInput 
      onSubmitEditing={() => this.customInput2.refs.innerTextInput2.focus()}
      returnKeyType="next"
      ... />

  <CustomBoladonesTextInput 
       ref={ref => this.customInput2 = ref}
       refInner="innerTextInput2"
       ... />

W definicji komponentu CustomBoladonesTextInput przekazuję refField do wewnętrznego rekwizytu ref:

   export default class CustomBoladonesTextInput extends React.Component {
      render() {        
         return (< TextInput ref={this.props.refInner} ... />);     
      } 
   }

I voila. Wszystko wróci do normy. Mam nadzieję że to pomoże

Rodrigo Tessarollo
źródło
4

Wypróbuj to rozwiązanie w przypadku problemów z GitHub React Native.

https://github.com/facebook/react-native/pull/2149#issuecomment-129262565

Musisz użyć prop prop dla komponentu TextInput.
Następnie potrzebujesz utworzyć funkcję, która zostanie wywołana na prop onSubmitEditing, który przenosi fokus na drugie odwołanie TextInput.

var InputScreen = React.createClass({
    _focusNextField(nextField) {
        this.refs[nextField].focus()
    },

    render: function() {
        return (
            <View style={styles.container}>
                <TextInput
                    ref='1'
                    style={styles.input}
                    placeholder='Normal'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('2')}
                />
                <TextInput
                    ref='2'
                    style={styles.input}
                    keyboardType='email-address'
                    placeholder='Email Address'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('3')}
                />
                <TextInput
                    ref='3'
                    style={styles.input}
                    keyboardType='url'
                    placeholder='URL'
                    returnKeyType='next'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('4')}
                />
                <TextInput
                    ref='4'
                    style={styles.input}
                    keyboardType='numeric'
                    placeholder='Numeric'
                    blurOnSubmit={false}
                    onSubmitEditing={() => this._focusNextField('5')}
                />
                <TextInput
                    ref='5'
                    style={styles.input}
                    keyboardType='numbers-and-punctuation'
                    placeholder='Numbers & Punctuation'
                    returnKeyType='done'
                />
            </View>
        );
    }
});
APAquino
źródło
W odpowiedzi podaj informacje względne z linku.
Wes Foster,
Należy pamiętać, że referencje ciągów mogą być przestarzałe, więc to rozwiązanie może nie działać w przyszłości: „... Chociaż referencje ciągów nie są przestarzałe, są uważane za starsze i prawdopodobnie zostaną wycofane w pewnym momencie w przyszłości. preferowane ”. - facebook.github.io/react/docs/more-about-refs.html
yura
1
To już nie działa, od wersji 0.36. Nie ma metody „koncentracji” na komponencie. Jak powinniśmy to teraz zrobić? Czy potrafisz zaktualizować odpowiedź?
Mitch
@Mitch nie jest pewien, czy to wróciło do wersji 0.39.2, ale teraz działa dobrze.
Eldelshell
4

Używanie odwołań zwrotnych zamiast odwołań do starszego ciągu:

<TextInput
    style = {styles.titleInput}
    returnKeyType = {"next"}
    autoFocus = {true}
    placeholder = "Title"
    onSubmitEditing={() => {this.nextInput.focus()}}
/>
<TextInput
    style = {styles.descriptionInput}  
    multiline = {true}
    maxLength = {200}
    placeholder = "Description"
    ref={nextInput => this.nextInput = nextInput}
/>
fagerbua
źródło
1
Nie działa, ponieważ metoda focus została usunięta z TextInput.
Jacob Lauritzen,
3
<TextInput 
    keyboardType="email-address"
    placeholder="Email"
    returnKeyType="next"
    ref="email"
    onSubmitEditing={() => this.focusTextInput(this.refs.password)}
    blurOnSubmit={false}
 />
<TextInput
    ref="password"
    placeholder="Password" 
    secureTextEntry={true} />

I dodaj metodę onSubmitEditing={() => this.focusTextInput(this.refs.password)}jak poniżej:

private focusTextInput(node: any) {
    node.focus();
}
Nisar
źródło
2

Aby zaakceptowane rozwiązanie działało, jeśli TextInputznajdujesz się w innym składniku, musisz „pop” referencję z refkontenera nadrzędnego.

// MyComponent
render() {
    <View>
        <TextInput ref={(r) => this.props.onRef(r)} { ...this.props }/>
    </View>
}

// MyView
render() {
    <MyComponent onSubmitEditing={(evt) => this.myField2.focus()}/>
    <MyComponent onRef={(r) => this.myField2 = r}/>
}
Eldelshell
źródło
1
Cześć @ Eldelshell, chciałbym osiągnąć to samo, ale nie mogłem uporządkować próbki, czy mógłbyś nam pokazać podpowiedź?
Seeliang
Myślę, że to powinna być poprawna odpowiedź. Śledzę to i działa.
David Cheung
czy oba są w tym samym pliku?
MoralCode
2

w twoim komponencie:

constructor(props) {
        super(props);
        this.focusNextField = this
            .focusNextField
            .bind(this);
        // to store our input refs
        this.inputs = {};
    }
    focusNextField(id) {
        console.log("focus next input: " + id);
        this
            .inputs[id]
            ._root
            .focus();
    }

Uwaga: Użyłem, ._rootponieważ jest to odwołanie do TextInput w danych wejściowych NativeBase'Library '

i podczas wprowadzania tekstu w ten sposób

<TextInput
         onSubmitEditing={() => {
                          this.focusNextField('two');
                          }}
         returnKeyType="next"
         blurOnSubmit={false}/>


<TextInput      
         ref={input => {
              this.inputs['two'] = input;
                        }}/>
amorenew
źródło
2
<TextInput placeholder="Nombre"
    ref="1"
    editable={true}
    returnKeyType="next"
    underlineColorAndroid={'#4DB6AC'}
    blurOnSubmit={false}
    value={this.state.First_Name}
    onChangeText={First_Name => this.setState({ First_Name })}
    onSubmitEditing={() => this.focusNextField('2')}
    placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />

<TextInput placeholder="Apellido"
    ref="2"
    editable={true}
    returnKeyType="next"
    underlineColorAndroid={'#4DB6AC'}
    blurOnSubmit={false}
    value={this.state.Last_Name}
    onChangeText={Last_Name => this.setState({ Last_Name })}
    onSubmitEditing={() => this.focusNextField('3')}
    placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />

i dodaj metodę

focusNextField(nextField) {
    this.refs[nextField].focus();
}
Saloni Parikh
źródło
Bardzo miłe podejście.
Siraj Alam
1
Stara odpowiedź, ale czy ktoś wie, czy można uzyskać dostęp do wszystkich referencji jak w tej odpowiedzi w funkcjonalnym (bezpaństwowym) komponencie?
Douglas Schmidt,
1

Istnieje sposób na przechwytywanie kart w pliku TextInput. Jest zuchwały, ale lepszy niż nic .

Zdefiniuj onChangeTextmoduł obsługi, który porównuje nową wartość wejściową ze starą, sprawdzając, czy \t. Jeśli zostanie znaleziony, przesuń pole, jak pokazano na @boredgames

Zakładając, że zmienna usernamezawiera wartość nazwy użytkownika i setUsernamewywołuje akcję zmieniającą ją w sklepie (stan komponentu, magazyn redux itp.), Wykonaj coś takiego:

function tabGuard (newValue, oldValue, callback, nextCallback) {
  if (newValue.indexOf('\t') >= 0 && oldValue.indexOf('\t') === -1) {
    callback(oldValue)
    nextCallback()
  } else {
    callback(newValue)
  }
}

class LoginScene {
  focusNextField = (nextField) => {
    this.refs[nextField].focus()
  }

  focusOnPassword = () => {
    this.focusNextField('password')
  }

  handleUsernameChange = (newValue) => {
    const { username } = this.props            // or from wherever
    const { setUsername } = this.props.actions // or from wherever

    tabGuard(newValue, username, setUsername, this.focusOnPassword)
  }

  render () {
    const { username } = this.props

    return (
      <TextInput ref='username'
                 placeholder='Username'
                 autoCapitalize='none'
                 autoCorrect={false}
                 autoFocus
                 keyboardType='email-address'
                 onChangeText={handleUsernameChange}
                 blurOnSubmit={false}
                 onSubmitEditing={focusOnPassword}
                 value={username} />
    )
  }
}
marius
źródło
Nie działało to dla mnie przy użyciu fizycznej klawiatury. Zdarzenie onChangeText nie uruchamia się na karcie.
Bufke,
0

Tutaj odczynnik dla składnika wejściowego, który ma właściwość: focus.

Pole będzie skupione tak długo, jak długo ten rekwizyt będzie ustawiony na true i nie będzie się skupiać tak długo, jak będzie to fałszywe.

Niestety ten komponent musi mieć zdefiniowane: ref, nie mogłem znaleźć innego sposobu na wywołanie .focus (). Cieszę się z sugestii.

(defn focusable-input [init-attrs]
  (r/create-class
    {:display-name "focusable-input"
     :component-will-receive-props
       (fn [this new-argv]
         (let [ref-c (aget this "refs" (:ref init-attrs))
               focus (:focus (ru/extract-props new-argv))
               is-focused (.isFocused ref-c)]
           (if focus
             (when-not is-focused (.focus ref-c))
             (when is-focused (.blur ref-c)))))
     :reagent-render
       (fn [attrs]
         (let [init-focus (:focus init-attrs)
               auto-focus (or (:auto-focus attrs) init-focus)
               attrs (assoc attrs :auto-focus auto-focus)]
           [input attrs]))}))

https://gist.github.com/Knotschi/6f97efe89681ac149113ddec4c396cc5

Knotschi
źródło
@Bap - to jest Clojurescript. Odczynnik jest związkiem React. Jeśli jesteś ciekawy, to świetnie pasuje do React, jeśli masz ochotę na seplenienie, ponieważ stanowe aktualizacje są na ogół możliwe tylko z takimi rzeczami, jak wyraźne wezwanie doswap! w sprawie atomrodzaju. Zgodnie z dokumentacją służy to do powiązania z React: „Każdy komponent wykorzystujący atom jest automatycznie renderowany ponownie, gdy zmienia się jego wartość”. reagent-project.github.io
Del
0

Jeśli używasz NativeBase jako składników interfejsu użytkownika, możesz użyć tej próbki

<Item floatingLabel>
    <Label>Title</Label>
    <Input
        returnKeyType = {"next"}
        autoFocus = {true}
        onSubmitEditing={(event) => {
            this._inputDesc._root.focus(); 
        }} />
</Item>
<Item floatingLabel>
    <Label>Description</Label>
    <Input
        getRef={(c) => this._inputDesc = c}
        multiline={true} style={{height: 100}} />
        onSubmitEditing={(event) => { this._inputLink._root.focus(); }} />
</Item>
Mohamed Ben Hartouz
źródło