React Native - при нажатии кнопки «Далее» на клавиатуре сместить фокус на следующее поле ввода

Question

Я очень новичок в своем родном мире.Я хочу сместить фокус с первого поля ввода на второе поле ввода.Пожалуйста, найдите мой код ниже.

<View style={styles.inputViewStyle}>
                  <TextInput
                    ref={firstnameRef => (this.firstnameRef = 
                    firstnameRef)}
                    label="Firstname"
                    returnKeyType="next"
                    autoCorrect={false}
                    value={this.state.firstname}
                    onSubmitEditing={() => 
              this.refs.middlenameRef.focus()}
                    onChangeText={firstname => this.setState({ firstname })}
                    blurOnSubmit={false}
                  />
                </View> 

    <View style={styles.inputViewStyle}>
                  <TextInput
                    ref={middlenameRef => (this.middlenameRef = middlenameRef)}
                    label="Middlename"
                    returnKeyType="go"
                    value={this.state.middlename}
                    onChangeText={middlename => this.setState({ middlename })}
                  />
                </View>

Я получаю ошибку -> "undefined не является объектом (оценка 'this2.middlenameRef.focus ()')"

ОБНОВЛЕНИЕ: constructor(props) { super(props); this.state = { firstname: "", middlename: "", lastname: ""<br> };

Пожалуйста, руководство.Заранее спасибо.

Answer 1

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

Answer 2

Установить второй фокус TextInput, когда срабатывает предыдущий TextInput onSubmitEditing.

Попробуйте это

1. Добавление ссылки на второй TextInput ref = {(input) => {this.secondTextInput = input;}}

2. Привязать функцию фокуса к первому событию TextSput onSubmitEditing.onSubmitEditing = {() => {this.secondTextInput.focus ();}}

3. Не забудьте установить для blurOnSubmit значение false, чтобы предотвратить мерцание клавиатуры.blurOnSubmit = {false}

Answer 3

Вы можете получить экземпляр напрямую через это.И нулевая проверка может быть хорошим вариантом для отладки.

onSubmitEditing={() => this.middlenameRef && this.middlenameRef.focus()}

Answer 4

Попробуйте это:

onSubmitEditing={() => { this.middlenameRef.focus() }}