How to use useRef hook to select next TextInput after pressing next keyboard button with redux-form

Question

I know we can do this easily with react class method.because we have this.ref. but I am not sure how to do this with useRef hook in functional component.

using tricks written here

This is how I am trying to do this.

  ...

  const inputEl1 = useRef(null);
  const inputEl2 = useRef(null);
  return (
        <Field
            name="first_name"
            component={MyTextInput}
            placeholder="First name"
            ref={inputEl1}
            refField={inputEl1}
            onEnter={() => {
              inputEl2.current.focus();
            }}
          />
          />
          <Field
            name="last_name"
            placeholder="Last name"
            component={MyTextInput}
            ref={inputEl2}
            refField={inputEl2}
          />
)
...

So I need to pass ref from field to MyTextInput and on nextKeyPress I want to focus to second input component i.e inputEl2

// My Text Input

...
render() {
    const {
      input: { value, onChange, onBlur },
      meta: { touched, error },
      keyboardType,
      placeholder,
      secureTextEntry,
      editable,
      selectTextOnFocus,
      style,
      selectable,
      customValue,
      underlineColorAndroid,
      autoFocus,
      maxLength,
      returnKeyType,
      onEnter,
      refField,
    } = this.props;
    const { passwordVisibility, undelineColor } = this.state;

    return (
      <View style={{ marginVertical: 8 }}>
        <TextInput
          style={[{
            height: 50,
            paddingLeft: 20,
            color: Colors.SECONDARY_COMMON,
          }, style]}
          onBlur={val => onBlur(val)}
          keyboardType={keyboardType}
          underlineColorAndroid={undelineColor}
          placeholder={placeholder}
          returnKeyType={returnKeyType || 'go'}
          value={customValue || value.toString()}
          onChangeText={onChange}
          maxLength={maxLength}
          onSubmitEditing={onEnter}
          ref={refField}
        />
)
}

Solution 1

const inputEl2 = useRef(null);
<TextInput
        name="first_name"           
        placeholder="First name"
        onSubmitEditing={() => inputEl2.current.focus()}
      />

<TextInput
        name="last_name"
        placeholder="Last name"
        ref={inputEl2}
      />

it worked for me

Solution 2

If it is a child component you are trying to get the ref of, you need to pass the prop as some other name rather than ref.

This method worked for me

For hooks, useRef to init ref.

const passwordInput = useRef(null);

Use a different name for ref prop for custom component, e.g. inputRef.

<CustomInput
  inputRef={ passwordInput }
/>

Child component - Set ref as custom ref prop.

const CustomInput = props => {
  const { inputRef } = props;
  
  return ( <TextInput
    { ...props }
    ref={ inputRef }
  /> );
};

Solution 3

If a child needs to use a prop like a ref as in <TextInput ref={refField}..., then the prop needs to be a ref (not a string):

<Field refField={inputEl2} ...

Comments

[shubham choudhary]

I tried this as well. still no luck :( when I am pressing next key on mobile keyboard it says. undefined is not an object( evaluating inputEl2.currunt.focus.

[Aprillion]

do you have the typo currunt -> current in your code too? if not, try to create a stackoverflow.com/help/mcve example where you tried this as well - the problem is most likely somewhere that you didn't show us yet

[shubham choudhary]

Yes, there was a typo. But still I am getting inputEl2.current.focus is not a function. Thanks for sharing the above link. will read that too. I guess redux form's filed component won't recognise the useRef. As their code is not updated to hooks. correct me if I am wrong. Is this possible? I guess as per the react doc, I am using this correctly now reactjs.org/docs/hooks-reference.html#useref