我正在开发一个反应原生的应用程序。我有三个TextInput框如下:
如果用户插入数字,我需要自动更改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,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,他/她应该在第一个TextInput中插入1,然后光标和焦点应自动替换为下一个TextInput,并且她/他可以插入5并最终通过移动焦点并且对第三个TextInput进行了诅咒,他/她可以插入3.只要他插入3,我就需要执行this.triggerFunction()
。我试图使用以下技巧,但它没有用:
onSubmitEditing={this.maxLength?1:() => this.focusNextField('3')}
你能帮我解决这个问题吗?提前致谢。
你必须关注你想要光标去的TextInput
。要做到这一点,你可以将maxLength
设置为1
,并调用onChangeText
来改变焦点。您可能还想捕获value
并将其存储在州中。
另一件事应该是使用单词或字符作为参考。这些将被称为对象,数字可能有点令人困惑。即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,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
}}
/>
对于原生基地,需要进行微小的改变。它使用getRef而不是ref。以下代码将更改为文本更改时的下一个输入字段,并在删除输入时恢复为上一个字段。
<Item floatingLabel style={{width:30,borderColor:"black" }}>
<Input
style={{flex:1}}
getRef={input => {this.input_1 = input; }}
keyboardType={'numeric'}
maxLength = {1}
numberOfLines={1}
onChangeText={value => {
this.setState({ value })
if (value) this.input_2._root.focus(); //assumption is next TextInput ref is input_2
}}
/>
</Item>
<Item floatingLabel style={{width:30}}>
<Input
style={{flex:1}}
getRef={input => {this.input_2 = input; }}
keyboardType={'numeric'}
maxLength = {1}
numberOfLines={1}
onChangeText={value => {
this.setState({ value })
if (value) this.input_3._root.focus(); else this.input_1._root.focus() ; //assumption is next TextInput ref is input_3
}}
/>
</Item>
回答的问题肯定是有益的,但我的es-lint
抛出错误说使用字符串或者也许this.refs折旧
所以这就是我所做的,在构造函数中创建refs(可能这就是反应所暗示的)。在我的情况下,我想要4个文本输入框
constructor(props) {
super(props)
this.keyboardHeight = new Animated.Value(0)
this.num1 = React.createRef()
this.num2 = React.createRef()
this.num3 = React.createRef()
this.num4 = React.createRef()
}
然后像这样渲染组件
<View style={styles.inputBoxes}>
<TextInput
ref={this.num1}
style={styles.textInput}
onChangeText={number => this.inputNumber(number, 1)}
value={this.state.num1}
keyboardType="numeric"
numberOfLines={1}
/>
<TextInput
ref={this.num2}
style={styles.textInput}
onChangeText={number => this.inputNumber(number, 2)}
value={this.state.num2}
keyboardType="numeric"
numberOfLines={1}
/>
<TextInput
ref={this.num3}
style={styles.textInput}
onChangeText={number => this.inputNumber(number, 3)}
value={this.state.num3}
keyboardType="numeric"
numberOfLines={1}
/>
<TextInput
ref={this.num4}
style={styles.textInput}
onChangeText={number => this.inputNumber(number, 4)}
value={this.state.num4}
keyboardType="numeric"
numberOfLines={1}
/>
</View>
注意TextInput里面的引用。在我的onChange中,我正在传递一个标志,告诉它是哪个按钮是this.inputNumber
这就是我的inputNumber
功能的样子
inputNumber(value, flag) {
const completeFlag = `num${flag}`
this.setState({[completeFlag]: value})
flag = flag + 1
if (flag < 5 && value) {
const nextFlag = `num${flag}`
const textInputToFocus = this[nextFlag]
textInputToFocus.current.focus()
}
}