相关疑难解决方法(0)

React Native:如何在按下"下一个"键盘按钮后选择下一个TextInput?

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

<TextInput 
   style = {styles.titleInput}
   returnKeyType = {"next"}
   autoFocus = {true}
   placeholder = "Title" />
<TextInput
   style = {styles.descriptionInput}          
   multiline = {true}
   maxLength = {200}
   placeholder = "Description" />
Run Code Online (Sandbox Code Playgroud)

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

谢谢!

ios react-native

154
推荐指数
13
解决办法
13万
查看次数

使用redux-form按下下一个键盘按钮后如何使用useRef钩子选择下一个TextInput

我知道我们可以使用 react 类方法轻松做到这一点。因为我们有 this.ref。但我不确定如何在功能组件中使用 useRef 钩子来做到这一点。

使用这里写的技巧

这就是我试图做到这一点的方式。

  ...

  const inputEl1 = useRef(null);
  const inputEl2 = useRef(null);
  return (
        <Field
            name="first_name"
            component={MyTextInput}
            placeholder="First name"
            ref={inputEl1}
            refField={inputEl1}
            onEnter={() => {
              inputEl2.current.focus();
            }}
          />
          />
          <Field
            name="last_name"
            placeholder="Last name"
            component={MyTextInput}
            ref={inputEl2}
            refField={inputEl2}
          />
)
...
Run Code Online (Sandbox Code Playgroud)

所以我需要将 ref from field 传递给 MyTextInput 并且在 nextKeyPress 上我想关注第二个输入组件,即 inputEl2

// 我的文本输入

...
render() {
    const {
      input: { value, onChange, onBlur },
      meta: { touched, error },
      keyboardType,
      placeholder,
      secureTextEntry,
      editable,
      selectTextOnFocus,
      style,
      selectable, …
Run Code Online (Sandbox Code Playgroud)

textinput reactjs react-native redux-form react-hooks

8
推荐指数
3
解决办法
8682
查看次数

标签 统计

react-native ×2

ios ×1

react-hooks ×1

reactjs ×1

redux-form ×1

textinput ×1