reactjs – 将焦点自动更改为react native中的下一个TextInput

发布时间：2020-12-15 16:21:28 所属栏目：百科来源：网络整理

导读：我正在开发一个反应原生的应用程序.我有三个TextInput框如下：如果用户插入数字,我需要自动更改TextInput框的焦点.然后,只要他/她插入最后一个数字,就应该执行一个功能. 这是我的代码： View style={styles.squareContainer} View style={styles.square} Te

我正在开发一个反应原生的应用程序.我有三个TextInput框如下：

enter image description here

如果用户插入数字,我需要自动更改TextInput框的焦点.然后,只要他/她插入最后一个数字,就应该执行一个功能.

这是我的代码：

<View style={styles.squareContainer}>
                <View style={styles.square}>
                    <TextInput
                      onChangeText={(oldPassword) => this.setState({oldPassword})}
                      style={{flex:1}}
                      ref="1"
                      keyboardType={'numeric'}
                      style={styles.inputText}
                      maxLength = {1}
                      underlineColorAndroid='rgba(0,0)'
                      numberOfLines={1}
                      secureTextEntry={true}
                      onSubmitEditing={() => this.focusNextField('2')}


                    />
                </View>
                <View style={styles.square}>
                    <TextInput
                      style={{flex:1}}
                      ref="2"
                      onChangeText={(oldPassword) => this.setState({oldPassword})}
                      keyboardType={'numeric'}
                      maxLength = {1}
                      style={styles.inputText}
                      underlineColorAndroid='rgba(0,0)'
                      numberOfLines={1}
                      secureTextEntry={true}
                      onSubmitEditing={this.maxLength?1:() => this.focusNextField('3')}


                    />
                </View>
                <View style={styles.square}>
                    <TextInput
                      style={{flex:1}}
                      ref="3"
                      onChangeText={(oldPassword) => this.setState({oldPassword})}
                      returnKeyType='next'
                      keyboardType={'numeric'}
                      style={styles.inputText}
                      underlineColorAndroid='rgba(0,0)'
                      numberOfLines={1}
                      secureTextEntry={true}


                    />
                </View>
              </View>

换句话说,例如,如果用户想要插入153,他/她应该在第一个TextInput中插入1,然后光标和焦点应自动替换为下一个TextInput,并且她/他可以插入5并最终通过移动焦点并且对第三个TextInput进行了诅咒,他/她可以插入3.一旦插入3,我就需要执行this.triggerFunction().
我试图使用以下技巧,但它没有用：

onSubmitEditing={this.maxLength?1:() => this.focusNextField('3')}

你能帮我解决这个问题吗？提前致谢.

解决方法

您必须将要光标所在的TextInput对焦.为此,您可以将maxLength设置为1,并调用onChangeText来更改焦点.
您可能还想捕获该值并将其存储在状态中.

另一件事应该是使用单词或字符作为参考.这些将被称为对象,数字可能有点令人困惑.即ref = {‘input_1’}而不是ref = {‘1’}

<TextInput
    onChangeText={(oldPassword) => this.setState({oldPassword})}
    style={{flex:1}}
    ref="input_1"
    keyboardType={'numeric'}
    style={styles.inputText}
    maxLength = {1}
    value={this.state.value}
    underlineColorAndroid='rgba(0,0)'
    numberOfLines={1}
    secureTextEntry={true}
    onChangeText={value => {
       this.setState({ value })
       if (value) this.refs.input_2.focus(); //assumption is TextInput ref is input_2
    }}
  />

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!