将焦点自动更改为 react native 中的下一个 TextInput

Posted 2023-04-18

【中文标题】将焦点自动更改为 react native 中的下一个 TextInput

【英文标题】：Change the focus automatically to the next TextInput in react native

【发布时间】：2018-08-08 06:15:37

【问题描述】：

我正在开发一个带有本机反应的应用程序。我有如下三个 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')

你能帮我解决这个问题吗？提前致谢。

【参考方案1】：

您必须将光标对准您希望光标转到的TextInput。为此，您可以将maxLength 设置为1，并调用onChangeText 更改焦点。 您可能还想捕获value 并将其存储在状态中。

您应该使用的另一件事是使用单词或字符作为参考。这些将被称为对象和数字可能有点令人困惑。即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
    
  />

【讨论】：

完美！有效！这是一个聪明而简短的回答。我投了赞成票并将其标记为正确答案！谢谢。 :)

【参考方案2】：

已回答的问题肯定是有益的，但我的 es-lint 抛出一个错误，说使用字符串或者 this.refs 已被贬值

所以这就是我所做的，在构造函数中创建 refs（可能这就是 react 建议的方式）。在我的情况下，我想要 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 中的 refs。在我的 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()
    

【参考方案3】：

对于原生基础，需要进行微小的更改。 它使用 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>