Как обработать onChange и изменить фокус на новый <Field>?

Question

Я использую Formik (с withFormik()) и хочу проверить <Field> когда пользователь вводит его - после того, как в нем есть 4 символа, я хочу сосредоточиться на следующем поле, чтобы они могли продолжать печатать, не переходя к следующему полю.

Так что мой InnerForm имеет:

<Field
  type="text"
  name="credit1"
  inputmode="numeric"
  maxlength="4" />
<Field
  type="text"
  name="credit2"
  inputmode="numeric"
  maxlength="4" />

И мой FormikInnerFormContainer = withFormik(...) имеет схему проверки.

Как я могу отловить изменения в первом поле и переместить фокус во второе поле, если в первом есть 4 символа?

Я пытался переопределить onChange, но не мог понять, как обновить содержимое поля с каждым символом, который вводит пользователь.

Answer 1

Вы можете использовать это в Formik.

  focusChange(e) {
    if (e.target.value.length >= e.target.getAttribute("maxlength")) {
      e.target.nextElementSibling.focus();
    }
    ...

//Example implementation
import React from "react";
import { Formik } from "formik";

export default class Basic extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.focusChange = this.focusChange.bind(this);
  }

  focusChange(e) {
    if (e.target.value.length >= e.target.getAttribute("maxlength")) {
      e.target.nextElementSibling.focus();
    }
  }

  render() {
    return (
      <div>
        <h1>My Form</h1>
        <Formik
          initialValues={{ name: "" }}
          onSubmit={(values, actions) => {
            setTimeout(() => {
              alert(JSON.stringify(values, null, 2));
              actions.setSubmitting(false);
            }, 1000);
          }}
          render={props => (
            <form onSubmit={props.handleSubmit} ref={this.inputRef}>
              <input
                type="text"
                onChange={props.handleChange}
                onBlur={props.handleBlur}
                value={props.values.name}
                name="name"
                maxlength="4"
                onInput={e => this.focusChange(e)}
              />
              <input
                type="text"
                onChange={props.handleChange}
                onBlur={props.handleBlur}
                value={props.values.lastName}
                name="lastName"
                maxlength="4"
                onInput={this.focusChange}
              />
              <button type="submit">Submit</button>
            </form>
          )}
        />
      </div>
    );
  }
}

Answer 2

В ванильном javascript вы можете сделать это:

document.querySelectorAll('input').forEach(function(input) {
  input.addEventListener('keyup', function() {
    if(input.value.length >= input.getAttribute('maxlength'))
      input.nextElementSibling.focus();
  });
})