我正在使用React Native开发一个应用程序,其中有三个文本输入框如下所示:
如果用户插入数字,则需要自动更改文本输入框的焦点。然后,当他/她插入最后一个数字时,应该执行一个函数。
这是我的代码:
<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,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,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,0,0)'
numberOfLines={1}
secureTextEntry={true}
/>
</View>
</View>
换句话说,例如一个用户想要插入153,他/她应该先将1插入到第一个TextInput中,然后光标和焦点应自动替换到下一个TextInput,接着他/她可以插入5并通过移动焦点和光标到第三个TextInput最后插入3。当他插入3时,我需要执行 this.triggerFunction()
。我尝试使用以下技巧,但它没有起作用:
onSubmitEditing={this.maxLength?1:() => this.focusNextField('3')}
您能帮我解决这个问题吗?先谢谢了。