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

Question

我正在使用 Redux Form (RF) 在 React Native 应用程序中。一切正常，但我不知道如何获得 refs来自 字段 输入以使用 Redux Form 转到下一个输入字段。

不带射频 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}/>
      )
   }
}

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

知道如何获得 引用文献 属性(property)？

Answer 1

此解决方案从 Form 传递 Prop 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}/>
      )
   }
} 

那么这里发生了什么？

我使用 ref={(componentRef) => this.field1 = componentRef} 将 ref 分配给本地范围正如@Ksyqo 建议的那样。感谢您的提示。

我通过refField="field1"到 RenderInput 并将值分配给输入 ref 属性 ref = {refField} .这会将输入对象添加到 refs 属性。

我分配了 onEnter领域功能

我将函数传递给 RenderInput 的 props 并将其分配给 onSubmitEditing={onEnter}功能。现在我们已经将这两个函数绑定(bind)在一起了。这意味着如果 onSubmitEditing被调用 onEnter函数也被调用

最后引用本地字段field2 ，获取渲染的组件并使用我们在 Input 中分配的 refs字段，设置焦点。 this.field2.getRenderedComponent().refs.field2.focus()

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