React Native：按下“下一个”键盘按钮后如何移动到下一个输入字段？答案

【问题标题】：React Native: How to move to the next input filed after pressing the “next” keyboard button?React Native：按下“下一个”键盘按钮后如何移动到下一个输入字段？
【发布时间】：2021-08-07 18:00:55
【问题描述】：

          <TextInput
            // ...
            returnKeyType = {"next"}
            returnKeyType='go'
          />

此代码没有将 'go'/'next' 引导到下一个输入字段如何在 iOS 的键盘上添加“下一个”和“上一个”箭头。并在键盘上设置“return”/“next”按钮，将用户带到 react native 中的下一个字段。

【问题讨论】：

您必须实现名为onSubmitEditing 的方法，该方法在按下该按钮时触发
使用输入事件并通过使用输入属性焦点，您可以将光标移动到下一个输入以供参考，您可以在此处查看davidltran.com/blog/focus-next-input-react-native/…。
@RohitKumar 非常感谢这有帮助！！！ onSubmitEditing={() => this.passwordRef.focus()} ref={ref => this.passwordRef = ref}

标签： javascript android ios reactjs react-native

【解决方案1】：

您可以使用文本输入的引用来关注下一个输入。

      const refPasswordInput = useRef(null);

      const focusOnPassword = () => {
        if (refPasswordInput && refPasswordInput.current) {
           refPasswordInput.current.focus();
        }
      };

      const hideKeyboard = () => {
        Keyboard.dismiss()
      };

      <TextInput
        ...
        blurOnSubmit={false}
        returnKeyType="next"
        onSubmitEditing={focusOnPassword}
      />

      <TextInput
        ref={refPasswordInput}
        ...
        returnKeyType="done"
        onSubmitEditing={hideKeyboard}
      />

【讨论】：