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

尝试一下：

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

Answer 2

在触发前一个TextInput的onSubmitEditing时，设置第二个TextInput焦点。

尝试一下

向第二个TextInput添加引用 ref = {（输入）=> {this.secondTextInput =输入; }}
将焦点函数绑定到第一个TextInput的onSubmitEditing事件。 onSubmitEditing = {（）=> {this.secondTextInput.focus（）; }}
请记住，将blurOnSubmit设置为false，以防止键盘闪烁。 blurOnSubmit = {false}

Answer 3

您可以通过此直接获取实例。空检查可能是调试的好选择。

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

Answer 4

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

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

4 个答案: