Сосредоточьтесь на следующем поле ввода при вводе в форме Redux

Я хочу определить HOC (компонент более высокого порядка), который будет отвечать за обработку функциональности. импортировать 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;

Пишет, что this.refs устарел. Итак, как я могу добиться поведения, подобного вкладке, при нажатии клавиши enter. Моя форма

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

// сделать поле

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

reactjs redux focus redux-form refs
person Anita    schedule 02.09.2018    source источник
comment
Можете ли вы воспроизвести этот код в codeandbox для рассмотрения сообществом.   -  person Adeel Imran    schedule 02.09.2018

Ответы (3)


arrow_upward
1
arrow_downward

В вашем методе конструктора определите свою ссылку следующим образом

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

В вашем рендере, где вы используете ref, сделайте это.

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

Ссылка на Refs Documentation React

person Adeel Imran    schedule 02.09.2018
comment
выдает ошибку: _react2.default.createRef не является функцией - person Anita; 02.09.2018
comment
какую версию React вы используете? - person Adeel Imran; 02.09.2018
comment
реагировать: ^ 16.2.0 - person Anita; 02.09.2018
comment
Вам нужно использовать реакцию ^ 16.4 (последняя) - person Adeel Imran; 02.09.2018

arrow_upward
1
arrow_downward

Вот как я решил эту проблему:
Моя форма с компонентами поля:
Когда поле expirationDate активно и пользователь нажимает следующую клавишу, фокус переходит к следующему полю с именем securityCode . Кроме того, когда securityCode активен и пользователь нажимает кнопку «Далее», мы отправили форму (поскольку это последнее поле формы). Вот почему для этого поля определен реквизит onSubmitEditing.

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

И компонент renderInputRef: (В этом проекте мы используем native-base, но без него почти то же самое.)

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>
  );
 }
}
person Hernán Albertario    schedule 31.05.2019

arrow_upward
0
arrow_downward

Вы можете использовать функцию обратного вызова< /a> для создания массива ссылок, которые можно использовать для циклического переключения между полями. Он будет работать с 16.2 и новее.

Покажите решение, когда оно будет готово ;)

person xadm    schedule 02.09.2018