React Native + Redux Form - 使用键盘下一个按钮转到下一个 TextInput 字段 [英] React Native + Redux Form - Use keyboard next button to go to next TextInput field

问题描述

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

I'm using Redux Form (RF) in a React Native application. Everything works fine but I can not figure out how to get the refs from the Field input to go to the next input field with Redux Form.

没有 RF 这个 解决方案会工作得很好.

Without RF this solution would work just fine.

这是我的代码:

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

当单击键盘上的 Next 键时，我将属性 nextField 传递给组件以确定下一个输入字段，但我无法获得 <RenderInput 组件中的 code>refs 属性.

I'm passing on the property nextField to the component to determine the next input field when the Next key on the keyboard is clicked but I can not get the refs property inside the RenderInput component.

知道如何获取 refs 属性吗?

Any idea how to get the refs property?

推荐答案

这个解决方案将 props 从 Form 组件传递到 RenderInput 组件并传递一个函数回调.

This solution passes props from the Form component to the RenderInput component and passes a function call back.

代码如下:

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={(componentRef) => 将 ref 分配给本地范围.this.field1 = componentRef} 正如@Ksyqo 所建议的那样.谢谢你的提示.

1. I assign the ref to local scope with ref={(componentRef) => this.field1 = componentRef} as @Ksyqo suggested. Thanks for the hint.

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

I pass refField="field1" to the RenderInput and assign the value to the input ref property ref = {refField}. This will add the input object to the refs property.

我在字段中分配了一个 onEnter 函数

I assigned a onEnter function in the Field

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

I pass the function to the props of RenderInput and assign it to the onSubmitEditing={onEnter} function. Now we have bind the two functions together. That means if onSubmitEditing gets invoked the onEnter function gets invoked as well

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

Finally, refer to the local field field2, get the rendered Component and use the refs, which we assigned in the Input field, to set the focus. this.field2.getRenderedComponent().refs.field2.focus()

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

I don't know if this is the most elegant solution but it works.

这篇关于React Native + Redux Form - 使用键盘下一个按钮转到下一个 TextInput 字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！