как перенести фокус на ошибочное поле в реагировании - PullRequest
Новая
       21

как перенести фокус на ошибочное поле в реагировании

0 голосов
/ 05 марта 2019

Я использую семантическую реакцию пользователя https://react.semantic -ui.com / collection / form / # shorthand-subcomponent-id . В моем примере есть форма с двумя полями. Я также выполнил требуемую проверку.Когда я нажимаю button, в поле отображается red border, если оно пустое. Я хочу, чтобы фокус переместился в первое поле ошибки, если в полях есть ошибка, вот мой код https://codesandbox.io/s/8yyqvvvj18

validateForm = () => {
    const { subscriberFirstName, subscriberMiddleName } = this.state,
      obj = { ...this.state };
    /* Empty validation*/
    let formError = false;
    if (!subscriberFirstName) {
      obj.subscriberFirstNameError = true;
      obj.formErrorMessage = "mandatory";
      formError = true;
    } else {
      obj.subscriberFirstNameError = false;
    }
    if (!subscriberMiddleName) {
      obj.subscriberMiddleNameError = true;
      obj.formErrorMessage = "mandatory";
      formError = true;
    } else {
      obj.subscriberMiddleNameError = false;
    }

    if (formError) {
      this.setState(preState => ({
        ...preState,
        ...obj,
        formError: true
      }));
    } else {
      this.setState(
        preState => ({
          ...preState,
          ...obj,
          formError: false,
          formErrorMessage: ""
        }),
        () => {
          //  this.saveForm(false);
        }
      );
    }
  };

Я хочу, чтобы фокус переместился в первое поле ошибки, когда пользователь нажмет кнопку.

При наличии ошибки в форме фокус переместится в первое поле ошибки

...