React Native + Redux Form - Use keyboard next button to go to next TextInput field

后端 未结 5 1205
遥遥无期
遥遥无期 2021-01-05 09:56

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 inp

相关标签:
5条回答
  • 2021-01-05 10:18

    I had a slightly different use case, but I imagine it works for the above as well.

    I used the focus action

    import { focus } from 'redux-form';
    dispatch(focus('signIn', 'email'));
    

    Then in the (custom) form field that contains the TextInput, I added in the render function

    <TextInput
        ref="email"
    />
    formStates.filter((state) => meta[state]).map((state) => {
       if(state === 'active'){
          this.refs.email.focus()
       }
    })
    

    No worries about the component nesting/hierarchy anymore.

    0 讨论(0)
  • 2021-01-05 10:27

    withRef is deprecated, use forwardRef instead.

    0 讨论(0)
  • 2021-01-05 10:29

    For people who are using Redux Form + React Native Elements, just follow @Thomas Dittmar answer, and add the following prop to the 'FormInput' component: textInputRef={refField}

    The newest version of React Native Element has added the focus() method, so you don't have to worry about that.

    0 讨论(0)
  • 2021-01-05 10:29

    I worked on getting a ref like this that worked for me.

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

    now access instance functions like this.

    this.myRef.anyFunc()
    
    0 讨论(0)
  • 2021-01-05 10:39

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

    Here's the code:

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

    So what happened here?

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

    2. 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.

    3. I assigned a onEnter function in the Field

    4. 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

    5. 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.

    0 讨论(0)
提交回复
热议问题