[英]Change the focus automatically to the next TextInput in react native
I am developing an App with react native.我正在开发一个具有本机反应的应用程序。 I have three TextInput boxes as bellow:
我有如下三个 TextInput 框:
I need to change the focus of the TextInput box automatically, if the user inserts a number.如果用户插入数字,我需要自动更改 TextInput 框的焦点。 Then, as soon as he/she inserts the last number a function should be executed.
然后,只要他/她插入最后一个数字,就应该执行一个函数。
Here is my code:这是我的代码:
<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>
In other words, for example if a user wants to insert 153, he/she should insert 1 into the first TextInput, then the curser and focus should replace to the next TextInput automatically and she/he can inserts 5 and finally by moving the focus and curser to the third TextInput, he/she can inserts 3. As soon as he inserts 3, I need to execute this.triggerFunction()
.换句话说,例如,如果用户要插入 153,他/她应该将 1 插入第一个 TextInput,然后光标和焦点应该自动替换到下一个 TextInput,她/他可以插入 5,最后通过移动焦点和光标到第三个 TextInput,他/她可以插入 3。只要他插入 3,我就需要执行
this.triggerFunction()
。 I tried to use the following trick as you can see, but it did't work:如您所见,我尝试使用以下技巧,但没有用:
onSubmitEditing={this.maxLength?1:() => this.focusNextField('3')}
Can you help me to solve this problem.你能帮我解决这个问题吗? Thanks in advance.
提前致谢。
You have to focus the TextInput
you want the cursor to go to.您必须聚焦您希望光标转到的
TextInput
。 To do that, You can set maxLength
to 1
, and call onChangeText
to change focus.为此,您可以将
maxLength
设置为1
,然后调用onChangeText
来更改焦点。 You may also want to capture the value
and store it in state.您可能还想捕获
value
并将其存储在状态中。
Another thing you should is to use words or characters for your references.您应该做的另一件事是使用单词或字符作为参考。 These are going to be called as objects and numbers may be a bit confusing to call.
这些将被称为对象和数字可能会有点混乱。 ie
ref={'input_1'}
instead of ref={'1'}
即
ref={'input_1'}
而不是ref={'1'}
<TextInput
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
}}
/>
The answered question was definitely beneficial but my es-lint
was throwing an error saying use of strings or maybe this.refs is depreciated回答的问题肯定是有益的,但我的
es-lint
抛出一个错误,说使用字符串或者 this.refs 被贬值
So this is what I did, create refs in the constructor (probably this is how react suggests).所以这就是我所做的,在构造函数中创建引用(可能这就是反应建议的方式)。 In my cases, I wanted 4 Text Inputs boxes
在我的例子中,我想要 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()
}
And then render component like this然后像这样渲染组件
<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>
notice the refs here inside TextInput.注意 TextInput 中的引用。 In my onChange, I am passing a flag, telling which button it is to
this.inputNumber
在我的 onChange 中,我传递了一个标志,告诉它是哪个按钮到
this.inputNumber
And this is how my inputNumber
function looks like这就是我的
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()
}
}
For native base there needs to be a minor change.对于本机基础,需要进行较小的更改。 Its uses getRef instead of ref.
它使用 getRef 而不是 ref。 The following code will change to the next input field on text change and revert back to the previous field when you delete the input.
以下代码将在文本更改时更改为下一个输入字段,并在您删除输入时恢复为上一个字段。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.