Focus on next Input field on Enter in Redux Form

问题

I want to define a HOC(higher order Component) which will be responsible for handling the functionality. import React, { Component } from 'react';

const NextFieldOnEnter = WrappedContainer =>
  class extends Component {
    componentDidMount() {
      console.log('hoc', this.refs);
      //move to next input field
    }
    render() {
      return <WrappedContainer {...this.props} />;
    }
  };
export default NextFieldOnEnter;

It says this.refs is deprecated. So how can I achieve tab like behavior when enter key is pressed. My form is

<Form>
<Field
  withRef
  hasFeedback
  name="name"
  ref={ref => {
    this.field1 = ref;
  }}
  refField = "field1"
  component={makeField}
  type="date"
/>  
<Field
    withRef
    hasFeedback
    name="address"
    ref={ref => {
      this.field2 = ref;
    }}
     refField ="field2"
    component={makeField}
    type="date"
  />
</Form>

//makefield

render() {
  const {type, input, label, ref, refField, ...rest} = this.props;
  return (
    <Form.Item
      label={label}
      colon={false}
      type={type}
      value={value}
      ref={ref}
    >
      <Input {...props} />
    </Form.Item>
  );
}

回答1:

In your constructor method define your ref like this

constructor(props) {
  super(props);
  this.field1 = React.createRef();
  this.field2 = React.createRef();
}

In your render where you are using ref do this.

<Field
  withRef
  hasFeedback
  name="name"
  ref={this.field1} // Proper way to assign ref in react ver 16.4
  refField = "field1"
  component={makeField}
  type="date"
/>  

Reference Refs Documentation React

回答2:

You can use callback ref funtion to create an array of refs that can be used for cycling between fields. It will work with 16.2 and newer.

Show solution when ready ;)

回答3:

This is how I solved this issue:
My Form with the field components:
When expirationDate field is active and the user presses the next key, the focus goes to the next field called securityCode . Also, when securityCode is active, and the user presses the next button, we submitted the form (because this is the last field of the form). This is why this Field has the onSubmitEditing prop defined.

<Form>
  <Field
    name={'expirationDate'}
    component={renderInputRef}
    withRef
    forwardRef
    ref={componentRef => (this.expirationDate = componentRef)}
    refField="expirationDate"
    onEnter={() => {
        try {
        this.cvc.getRenderedComponent().refs.cvc._root.focus();
        } catch {
        /*Do nothing */
        }
    }}
    onChange={(event, newValue) => {
        try {
            if (newValue?.length == 5) {
                this.cvc.getRenderedComponent().refs.cvc._root.focus();
            }
        } catch {
        /*Do nothing */
        }
    }}
  />

  <Field
    name={'securityCode'}
    component={renderInputRef}
    onSubmitEditing={!invalid ? handleSubmit(this.submit) : null}
    accessibilityLabel={'new-card-cvc'}
    keyboardType={'number-pad'}
    withRef
    forwardRef
    refField="cvc"
    ref={componentRef => (this.cvc = componentRef)}
  />
</Form>

And the renderInputRef component: (In this project we're using native-base, but it's almost the same without it.)

export class renderInputRef extends PureComponent<Props> {
 render() {
  const {
    input,
    onEnter,
    refField,
    display,
    description,
    iconRight,
    meta: { touched, warning },
    ...custom
  } = this.props;
  var hasError = touched && (error !== undefined || warning !== undefined);
  return (
    <React.Fragment>
      <Item 
        withRef
        forwardRef
      >
        <Input
          ref={refField}
          returnKeyType={'next'}
          onSubmitEditing={onEnter}
          {...input}
          {...custom}
        />
      </Item>
    </React.Fragment>
  );
 }
}

来源：https://stackoverflow.com/questions/52135089/focus-on-next-input-field-on-enter-in-redux-form