如何移动下一个textInput进行反应原生

Question

我使用React Native 0.48.4.如何选择下一个TextInput？我尝试使用以下代码,它不适合我

<TextInput 
  returnKeyType={'next'}
  secureTextEntry={true}
  style={styles.textBox}
  keyboardType = 'number-pad'
  maxLength = {1}
  autoFocus={true}
  blurOnSubmit={true}
  onSubmitEditing={(event) => { 
    this.refs.SecondInput.setFocus(); 
  }}
  onChange={this.onChangePassCode}
  onChangeText={(passCode) => this.setState({passCode})}
/>
<TextInput 
  ref='SecondInput'
  returnKeyType='next'
  secureTextEntry={true}
  style={styles.textBox}
  keyboardType = 'number-pad'
  maxLength = {1}
  blurOnSubmit={false}
  onChange={this.onChangePassCode}
  onChangeText={(passCode) => this.setState({passCode})}
/>

Answer 1

典型用例登录名和密码如下,

首先,在TextInput组件中为"ref"回调一个变量.注意:'ref'现在是一个回调函数,而不是不推荐使用的直接变量.现在在这个存储的变量上调用'focus()'来聚焦TextInput,如下所示

<TextInput
  keyboardType='email-address'
  returnKeyType='next'
  onSubmitEditing={() => this.passwordRef.focus()} 
  onChangeText={(email) => this.setState({email})}
/>

<TextInput
  ref={passwordRef => this.passwordRef = passwordRef}
  returnKeyType='done'
  autoCorrect={false}
  onChangeText={(password) => this.setState({password})}
/>

阅读这些文档并在react-native https://reactjs.org/docs/refs-and-the-dom.html#the-ref-callback-attribute中搜索直接操作