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>

我收到错误 ->"未定义不是对象(评估'this2.middlenameRef.focus(('(">

更新：constructor(props) { super(props); this.state = { firstname: "", middlename: "", lastname: ""
};

请指导。 提前谢谢。

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. 将引用添加到第二个文本输入 ref={(input( => { this.secondTextInput = input; }}

2. 将焦点函数绑定到第一个 TextInput 的 onSubmitEditing 事件。 onSubmitEdit={(( => { this.secondTextInput.focus((; }}

3. 请记住将blurOnSubmit设置为false，以防止键盘闪烁。 blurOnSubmit={false}

Answer 3

试试这个：

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

Answer 4

你可以通过这个直接获取实例。空检查可能是调试的不错选择。

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