React Native + Redux Form - 使用键盘下一个按钮转到下一个 TextInput 字段

Question

我在 React Native 应用程序中使用 Redux Form (RF)。一切正常，但我无法弄清楚如何从 Field 输入中获取 refs 以使用 Redux Form 转到下一个输入字段。

没有 RF 解决方案就可以正常工作。

这是我的代码：

class RenderInput extends Component {
   const { input, nextField, refs,
        meta: { touched, error, warning },
        input: { onChange } } = this.props
   render() {
      return (
         <Input
            returnKeyType = {'next'}
            onChangeText={onChange}
            onBlur={input.onBlur}
            onFocus={input.onFocus}
            onSubmitEditing = {(event) => {
               // refs is undefined
               refs[nextField].focus()
            }}/>
      )
   }
}

class Form extends Component {
   render() {
      return (
         <Field
            name="field1"
            focus
            withRef
            ref='field1'
            nextField = "field2"
            component={RenderInput}/>

         <Field
            name="vendor"
            withRef
            ref="field2"
            nextAction = "field3"
            component={RenderInput}/>
      )
   }
}

我正在将属性 nextField 传递给组件以确定单击键盘上的 Next 键时的下一个输入字段，但我无法获得 refs 属性在 RenderInput 组件内。

知道如何获得 refs 属性吗？

Answer 1

此解决方案将 props 从 Form 组件传递到 RenderInput 组件并传递函数回调。

代码如下：

class RenderInput extends Component {
   const { input, refField, onEnter,
        meta: { touched, error, warning },
        input: { onChange } } = this.props
   render() {
      return (
         <TextInput
            ref = {refField}
            returnKeyType = {'next'}
            onChangeText={onChange}
            onBlur={input.onBlur}
            onFocus={input.onFocus}
            onSubmitEditing={onEnter}/>
      )
   }
}

class Form extends Component {
   render() {
      return (
         <Field
            name="field1"
            focus
            withRef
            ref={(componentRef) => this.field1 = componentRef}
            refField="field1"
            component={RenderInput}
            onEnter={() => { 
               this.field2.getRenderedComponent().refs.field2.focus()
            }}/>

         <Field
            name="field2"
            withRef
            ref={(componentRef) => this.field2 = componentRef}
            refField="field2"
            component={RenderInput}/>
      )
   }
}

那么这里发生了什么？

我按照@Ksyqo 的建议将 ref 分配给 ref={(componentRef) => this.field1 = componentRef} 的本地范围。谢谢指点。
我将 refField="field1" 传递给 RenderInput 并将值分配给输入 ref 属性 ref = {refField}。这会将输入对象添加到 refs 属性。
我在字段中分配了一个onEnter函数
我把函数传给RenderInput的props，赋值给onSubmitEditing={onEnter}函数。现在我们已经将这两个函数绑定在一起了。这意味着如果 onSubmitEditing 被调用， onEnter 函数也会被调用
最后，引用本地字段field2，获取渲染的Component并使用我们在Input字段中分配的refs来设置焦点。 this.field2.getRenderedComponent().refs.field2.focus()

我不知道这是否是最优雅的解决方案，但它确实有效。

Answer 2

对于使用 Redux Form + React Native Elements 的人，只需按照@Thomas Dittmar 的回答，并在 'FormInput' 组件中添加以下属性：textInputRef={refField}

最新版本的React Native Element增加了focus()方法，不用担心

Answer 3

我努力获得像这样对我有用的参考。

           const renderComp = ({
             refName,
             meta: { touched, error },
             input,
             ...custom
           }) => (
             <MyComponent
               ref={refName}
               {...custom}
             />
           )

            <Field
              name={name}
              component={renderComp}
              ref={node =>
                isLeft ? (this.compRef1 = node) : (this.compRef2 = node)}
              refName={node =>
                 (this.myRef= node) }
              withRef
            />

现在像这样访问实例函数。

this.myRef.anyFunc()

Answer 4

withRef 已弃用，请改用 forwardRef。

Answer 5

我的用例略有不同，但我想它也适用于上述情况。

我用了焦点动作

import { focus } from 'redux-form';
dispatch(focus('signIn', 'email'));

然后在包含 TextInput 的（自定义）表单字段中，我在渲染函数中添加了

<TextInput
    ref="email"
/>
formStates.filter((state) => meta[state]).map((state) => {
   if(state === 'active'){
      this.refs.email.focus()
   }
})

再也不用担心 nesting/hierarchy 组件了。

React Native + Redux Form - 使用键盘下一个按钮转到下一个 TextInput 字段

React Native + Redux Form - Use keyboard next button to go to next TextInput field

react-native

redux-form