React Native - 按下键盘上的“下一步”按钮后将焦点转移到下一个输入框

Question

我是 React Native 世界的新手。 我想将焦点从第一个输入框转移到第二个输入框。 请找到我的以下代码。

<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 添加到第二个 TextInput ref={(input) => { this.secondTextInput = input; }}

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

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

Answer 3

试试这个：

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

Answer 4

你可以通过这个直接获取实例。并且 null 检查可能是一个很好的调试选择。

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