Проверка формы шаблона Reactjs не возвращает сообщение об ошибке

Question

Приведенный ниже код показывает, как я проверяю ReactJs , проверяя, что отправка формы не пуста и работает нормально.Теперь я хочу также убедиться, что форма ввода будет содержать только алфавиты.Для этого я прибегаю к методу шаблона, поэтому этот код pattern="^[a-zA-Z]+$"
Ниже описывается, как я проверяю его, но он не возвращает никакого сообщения об ошибке, если пользователь вводит любое значение, которое не является алфавитом

 <div className={'form-group' + (submitted  &&!user.firstName ? ' has-error' : 'pattern')}>
 {submitted && !user.firstName &&
                            <div className="help-block">The firstName can only contain the letters a-z or A-Z</div>
                        }
</div>

Вот рабочий код.Это делает проверку, гарантируя, что имя не пусто.Используя метод Pattern во входных данных, он проверяет, что имя содержит только алфавиты, но проблема в том, что он не отображает сообщение об ошибке, когда пользователь вводит значения, не являющиеся алфавитами.

<form name="form" onSubmit={this.handleSubmit}>
                    <div>
                        <label htmlFor="firstName">First Name</label>
                        <input type="text" className="form-control" name="firstName"  
pattern="^[a-zA-Z]+$" value={user.firstName} onChange={this.handleChange} />



 <div className={'form-group' + (submitted && !user.firstName ? ' has-error' : '')}>
 {submitted && !user.firstName &&
                            <div className="help-block">First Name is required</div>
                        }
</div>


/*
// Output error message if firstname is not alphabets 

 <div className={'form-group' + (submitted  &&!user.firstName ? ' has-error' : 'pattern')}>
 {submitted && !user.firstName &&
                            <div className="help-block">The firstName can only contain the letters a-z or A-Z</div>
                        }
</div>

*/

                    </div>

                    <div className="form-group">
                        <button">Register</button>


                    </div>
                </form>

Например,Ниже показано, как я достигаю той же цели в угловой 6

 <div class="form-group">
      <label>Username</label>
      <input type="text"
            class="form-control"
            name="username"
            [(ngModel)]="login.username"
            #loginUsername="ngModel"
            required
            pattern="^[a-zA-Z]+$">

      <span class="help-block danger" *ngIf="loginUsername.errors?.required  && loginUsername.touched">
        The username is required
      </span>
      <span class="help-block danger" *ngIf="loginUsername.errors?.pattern && loginUsername.touched">
        The username can only contain the letters a-z or A-Z
      </span>
    </div>

Answer 1

Вы, вероятно, безусловно сохраняете входное значение в состояние в handleChange. Недопустимое состояние должно читаться отдельно (явно) от события (реального DOM).

Вы можете предотвратить сохранение неправильных значений в состояние, используя условие в обработчике, например,

handleChange = e => {
  this.setState( {
    name: e.target.validity.valid ? e.target.value : ""
  })
}

Это заблокирует любые недопустимые символы (с начала). Недостатки: Будет сброшена вся допустимая строка при попытке вставить недопустимый символ.

Конечно, вы можете установить дополнительное значение для состояния ошибки ... и использовать его для условного рендеринга (стиль / подсказка).

Почему бы не использовать Formik? Обработка ошибок «низкого уровня», «необработанных» HTML и ручная проверка могут быть излишними. Это строгое требование?