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

Question

我在React Native应用程序中使用Redux Form(RF).一切正常但我无法弄清楚如何refs从Field输入到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}/>
      )
   }
} 

那么这里发生了什么？

1. 我将ref指定ref={(componentRef) => this.field1 = componentRef}为@Ksyqo建议的本地范围.谢谢你的提示.

2. 我传递refField="field1"给RenderInput并将值赋给输入ref属性ref = {refField}.这会将输入对象添加到refs属性.

3. 我onEnter在Field中分配了一个函数

4. 我将函数传递给RenderInput的props并将其分配给onSubmitEditing={onEnter}函数.现在我们将两个函数绑定在一起.这意味着如果onSubmitEditing调用此onEnter函数,也会调用该函数

5. 最后,引用局部字段field2,获取渲染的Component并使用我们在Input字段中指定的refs 来设置焦点.this.field2.getRenderedComponent().refs.field2.focus()

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