react native 中自動將焦點切換到下一個 TextInput

Question

我正在開發一個具有本機反應的應用程序。 我有如下三個 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，他/她應該將 1 插入第一個 TextInput，然后光標和焦點應該自動替換到下一個 TextInput，她/他可以插入 5，最后通過移動焦點和光標到第三個 TextInput，他/她可以插入 3。只要他插入 3，我就需要執行this.triggerFunction() 。 如您所見，我嘗試使用以下技巧，但沒有用：

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

你能幫我解決這個問題嗎？ 提前致謝。

Answer 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
    }}
  />

Answer 2

回答的問題肯定是有益的，但我的es-lint拋出一個錯誤，說使用字符串或者 this.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()
    }
}

Answer 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>