☰

React Native: 「次へ」キーボードボタンを押した後に次の TextInput を選択するにはどうすればいいですか? 質問する

tag-icon • tag-icon ios react-native react-native-textinput
React Native: 「次へ」キーボードボタンを押した後に次の TextInput を選択するにはどうすればいいですか? 質問する

次のように 2 つの TextInput フィールドを定義しました。

<TextInput 
   style = {styles.titleInput}
   returnKeyType = {"next"}
   autoFocus = {true}
   placeholder = "Title" />
<TextInput
   style = {styles.descriptionInput}          
   multiline = {true}
   maxLength = {200}
   placeholder = "Description" />

しかし、キーボードの「次へ」ボタンを押した後、React Native アプリは 2 番目の TextInput フィールドにジャンプしません。どうすればこれを実現できますか?

ありがとう！

ベストアンサー1

TextInput前のTextInputフォーカスがトリガーされたときに、 2 番目のフォーカスを設定しますonSubmitEditing。

これを試して

  1. 2番目のTextInputにRefを追加する
    ref={(input) => { this.secondTextInput = input; }}

  2. 最初の TextInputの onSubmitEditing イベントにフォーカス機能をバインドします。
    onSubmitEditing={() => { this.secondTextInput.focus(); }}

  3. キーボードのちらつきを防ぐために、blurOnSubmit を false に設定することを忘れないでください。
    blurOnSubmit={false}

すべて完了すると、次のようになります。

<TextInput
    placeholder="FirstTextInput"
    returnKeyType="next"
    onSubmitEditing={() => { this.secondTextInput.focus(); }}
    blurOnSubmit={false}
/>

<TextInput
    ref={(input) => { this.secondTextInput = input; }}
    placeholder="secondTextInput"
/>

おすすめ記事