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

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

首先，将变量分配给＆＃39; ref＆＃39;在TextInput组件中回调。 注意：＆＃39; ref＆＃39;现在是一个回调函数，而不是已弃用的直接变量。现在调用＆＃39; focus（）＆＃39;在这个存储的变量上，将焦点集中在下面给出的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

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

1 个答案: