Как мне правильно реализовать onBlur, есть ли еще одна проблема, которую я игнорирую?

#javascript #reactjs #material-ui

#javascript #reactjs #материал-пользовательский интерфейс

Вопрос:

Я пытаюсь реализовать проверку формы для созданной мной формы react. У меня есть onChange возможность установить значение в состояние для каждого текстового поля, а затем также onBlur функцию проверки, которая проверяет значение на соответствие регулярному выражению. Однако компонент, похоже, не обновляется с помощью a true для своего статуса ошибки (и, следовательно, не становится красным, уведомляя пользователя о том, что поле содержит что-то неправильное), пока я не нажму другой компонент и не начну печатать.

Вот validateOnBlur функция:

 validateOnBlur = field => e => {
    e.preventDefault();
    const { nameRegex, emailRegex } = regex;
    let errors = this.state.errors

    console.log(!nameRegex.test(e.target.value))

    switch (field) {
        case 'name':
            errors.nameError = !nameRegex.test(e.target.value)
            break;
        default: 
            break;
    }
}

Вот компонент текстового поля из Material-UI, у которого есть ошибка, при установке значения true компонент становится красным:

 <TextField
           error={this.state.errors.nameError}
           id="name"
           placeholder="First/Last"
           label="Legal Name"
           value={this.state.name}
           onChange={this.handleTextField("name")}
           onBlur={this.validateOnBlur("name")}
           fullWidth
       />

Ответ №1:

Вы никогда не обновляете новые ошибки в своем state . Вместо errors.nameError = !nameRegex.test(e.target.value) того, чтобы использовать setState и фактически применять это с

 this.setState({ errors: { ...errors, nameError: !nameRegex.test(e.target.value) } });