Question

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

没有RF this解决方案就可以了。

这是我的代码：

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组件。

知道如何获取引用属性吗？

Answer 1

此解决方案将道具从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={(componentRef) => this.field1 = componentRef}指定给本地作用域。谢谢你的提示。
我将refField="field1"传递给RenderInput并将值分配给输入引用属性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

withRef已过时，请改用forwardRef。

Answer 4

我努力获得一个对我有用的参考。

           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 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()
   }
})

不再担心组件的嵌套/层次结构。

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

5 个答案: