react-native – React Native Redux表单 – 使用键盘下一步按钮

发布时间：2020-12-15 05:06:14 所属栏目：百科来源：网络整理

导读：我在React Native应用程序中使用 Redux Form(RF).一切正常但我无法弄清楚如何从Field输入获取refs以使用Redux Form转到下一个输入字段. 没有RF this解决方案就可以正常工作. 这是我的代码： class RenderInput extends Component { const { input,nextField,

我在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键时确定下一个输入字段,但是我无法在RenderInput组件中获取refs属性.

知道如何获得refs属性吗？

此解决方案将表单组件中的props传递给RenderInput组件,并传递函数回调.

这是代码：

class RenderInput extends Component {
   const { input,refField,onEnter,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)=>将ref分配给局部范围. this.field1 = componentRef}为@Ksyqo建议.谢谢你的提示.
>我将refField =“field1”传递给RenderInput,并将值赋给输入ref属性ref = {refField}.这会将输入对象添加到refs属性.
>我在Field中分配了一个onEnter函数
>我将函数传递给RenderInput的props并将其分配给onSubmitEditing = {onEnter}函数.现在我们将两个函数绑定在一起.这意味着如果调用onSubmitEditing,也会调用onEnter函数
>最后,引用局部字段field2,获取渲染的Component并使用我们在Input字段中指定的refs来设置焦点. this.field2.getRenderedComponent().refs.field2.focus()

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!