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

问题描述

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

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" />

但按下键盘上的下一步按钮后，我的本机应用程序不会跳跃到第二个TextInput字段。我怎样才能实现这一目标？

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?

谢谢！

推荐答案

设置第二个 TextInput 焦点，当前一个 TextInput 的 onSubmitEditing 触发。

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

试试这个

1. 添加参考 second TextInput
   
   ref = {（input）=> {this.secondTextInput = input; }

将焦点函数绑定到第一个TextInput 的onSubmitEditing事件。

onSubmitEditing = {（）=> {this.secondTextInput.focus（）; }

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

请记住将blurOnSubmit设置为false，以防止键盘闪烁。

blurOnSubmit = {false}

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屋！