Мгновенная проверка поля ввода в реакции

Question

У меня есть поле ввода в React, я хочу сделать для них мгновенную проверку:

1. Подтвердите адрес электронной почты в правильном формате. если нет, отобразите ошибку прямо рядом с полем ввода адреса электронной почты.

2. Подтвердите адрес электронной почты и проверьте соответствие адреса электронной почты. если нет, отобразите ошибку прямо рядом с полем ввода Подтвердить адрес электронной почты.

3. Подтвердите, что имя не пустое.

export default class DOB extends Component {
constructor() {
  super();
  this.state = {
    Year: "",
    Month: "",
    Day: "",
    YearFocused: false,
    MonthFocused: false,
    DayFocused: false,
    Valid: true
  };
}

render() {
  return (
    <div>
      <p>
        Email Address:
        <input type="text" value="" />
      </p>
      <p>
        Verify Email Address:
        <input type="text" value="" />
      </p>
      <p>
        Name:
        <input type="text" value="" />
      </p>
      <p>
        DOB (YYYY MM DD):
        <input className="Year" type="text" />
        <input className="Month" type="text" />
        <input className="Day" type="text" />
      </p>
      <p>
        <button>Submit</button>
      </p>
    </div>
  );
}
}

Answer 1

Вы можете создать функцию дескриптора, которая будет обрабатывать изменения полей, а затем вы сможете управлять своими проверками. Вот быстрый пример, сделанный с полями Email и Verify Email . Вы можете использовать тот же подход для поля «имя».

Кроме того, взгляните на Контролируемые компоненты документы. Это поможет вам лучше понять, как это можно сделать. Как только вы хорошо понимаете, вы можете искать вспомогательную библиотеку, например formik .