web-dev-qa-db-ja.com

反応ネイティブで自動的に次のTextInputにフォーカスを変更します

反応ネイティブでアプリを開発しています。以下の3つのTextInputボックスがあります。

enter image description here

ユーザーが数値を挿入した場合、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を挿入し、最後にフォーカスを移動できます。 3番目のTextInputにカーソルを合わせると、3を挿入できます。3を挿入するとすぐに、this.triggerFunction()を実行する必要があります。ご覧のとおり、次のトリックを使用しようとしましたが、うまくいきませんでした。

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

この問題の解決を手伝ってくれませんか。前もって感謝します。

reactjsreact-nativetextinput
8
Reza

カーソルを移動するTextInputにフォーカスする必要があります。これを行うには、maxLengthを1に設定し、onChangeTextを呼び出してフォーカスを変更します。 valueを取得して状態に保存することもできます。

もう1つ、参照に単語または文字を使用する必要があります。これらはオブジェクトとして呼び出されるので、番号を呼び出すのは少し紛らわしいかもしれません。つまり、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
    }}
  />
9
Isaac Sekamatte

ネイティブベースの場合、マイナーな変更が必要です。 refではなくgetRefを使用しています。次のコードは、テキストが変更されると次の入力フィールドに変わり、入力を削除すると前のフィールドに戻ります。

<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>
0
RodneyO

答えられた質問は間違いなく有益でしたが、私の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()
    }
}
0
iRohitBhatia