代码之家 › 专栏 › 技术社区 › Saeid

在react native中将焦点自动更改为下一个文本输入

textinput react-native reactjs

Saeid · 技术社区 · 6 年前

我正在用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,他/她应该在第一个TextInput中插入1,然后光标和焦点应该自动替换为下一个TextInput,她/他可以插入5,最后通过将焦点和光标移动到第三个TextInput,他/她可以插入3。他一插入3,我就要执行 this.triggerFunction() . 正如您所见,我尝试使用以下技巧,但没有成功:

onSubmitEditing={this.maxLength?1:() => this.focusNextField('3')}

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

3 回复 | 直到 6 年前

Muhammad Shoaib Riaz 4 年前

你必须集中精力 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
    }}
  />

Alwaysblue 5 年前

回答的问题肯定是有益的,但我的 es-lint 正在抛出一个错误,表示使用字符串或可能是这个。参考值已折旧

这就是我所做的,在构造函数中创建引用(可能这就是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中的引用。在我的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()
    }
}

RodneyO 5 年前

对于native base,需要进行一些小的更改。它使用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>