React Native:如何在按下“next"后选择下一个 TextInput键盘按钮? [英] React Native: How to select the next TextInput after pressing the "next" keyboard button?

问题描述

我定义了两个 TextInput 字段，如下所示:

<文本输入样式 = {styles.descriptionInput}多行 = {真}最大长度 = {200}占位符 = "说明"/>

但是在按下键盘上的下一步"按钮后，我的 react-native 应用程序没有跳转到第二个 TextInput 字段.我怎样才能做到这一点?

谢谢！

解决方案

设置第二个TextInput焦点，当上一个TextInput的onSubmitEditing> 被触发.

试试这个

1. 向第二个 TextInput
   添加 Refref={(input) =>{ this.secondTextInput = input;}}

2. 将焦点函数绑定到第一个 TextInput 的 onSubmitEditing 事件.
   onSubmitEditing={() =>{ this.secondTextInput.focus();}}

3. 记得设置blurOnSubmit为false，防止键盘闪烁.
   blurOnSubmit={false}

<块引用>

完成后，它应该是这样的.

{ this.secondTextInput.focus();}}模糊提交={假}/><文本输入ref={(输入)=>{ this.secondTextInput = input;}}占位符=secondTextInput"/>

I defined two TextInput fields as follows:

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

But after pressing the "next" button on my keyboard, my react-native app isn't jumping to the second TextInput field. How can I achieve that?

Thanks!

解决方案

Set the second TextInput focus, when the previous TextInput's onSubmitEditing is triggered.

Try this

1. Adding a Ref to second TextInput
   ref={(input) => { this.secondTextInput = input; }}

2. Bind focus function to first TextInput's onSubmitEditing event.
   onSubmitEditing={() => { this.secondTextInput.focus(); }}

3. Remember to set blurOnSubmit to false, to prevent keyboard flickering.
   blurOnSubmit={false}

When all done, it should looks like this.

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

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

这篇关于React Native:如何在按下“next"后选择下一个 TextInput键盘按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！