Неожиданное поведение проверки текстового поля в пользовательском интерфейсе материала

Question

Запустив проект на Node и имея интерфейс на React, чтобы также установить переменные .env, я построил его с пользовательским интерфейсом Material, и все поставляемые TextFields работают, как и ожидалось, с их конкретной проверкой. За исключением поля, которое использует тот же шаблон, что и другие, оно не получает никаких входных данных и не выполняет никаких проверок. Кто-нибудь может направить меня, если я что-то упустил или как подойти к этой проблеме?

class Dashboard extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      // ...
      serviceHTTPSCa: "",
      serviceHTTPSCaError: ""
    }

    // ...

    this.handleChangeServiceHTTPSCa = this.handleChangeServiceHTTPSCa.bind(this);
  }

  handleChangeServiceHTTPSCa(event) {
    if (event.target.value.match(/^([a-z0-9_-]+).crt$/i)) {
      this.setState({
        serviceHTTPSCa: event.target.value,
        serviceHTTPSCaError: "",
      });
    } else {
      this.setState({
        serviceHTTPSCaError: "Invalid format!"
      });
    }
  }

  render() {
    return (
      <div>
        {/* some other markup */}
        <TextField
          hintText="Service https Ca..."
          fullWidth={true}
          value={this.state.serviceHTTPSCa}
          onChange={this.handleChangeServiceHTTPSCa}
          errorText={this.serviceHTTPSCaError}
          type="text"
        />
        {/* some other markup */}
      </div>
    );
  }
}

Answer 1

serviceHTTPSCaError состояние должно возвращать сообщение об ошибке или false, а errorText должен быть errorText={this.state.serviceHTTPSCaError}

Я сделал пример, чтобы проверить адрес электронной почты

handleChangeServiceHTTPSCa(event) {
  if (!event.target.value.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
    this.setState({
      serviceHTTPSCa: event.target.value,
      serviceHTTPSCaError: 'Email address is not vaild',
    },()=>{
      if(this.state.serviceHTTPSCa === ''){ // check if the input is empty
        this.setState({ serviceHTTPSCaError: false})
      });
  } else {
    this.setState({ serviceHTTPSCa: event.target.value,serviceHTTPSCaError: false });
  }
}

При возврате рендера

 <TextField
            hintText="Email Address"
            fullWidth={true}
            value={this.state.serviceHTTPSCa}
            onChange={this.handleChangeServiceHTTPSCa}
            errorText={this.state.serviceHTTPSCaError}
            type="text"
          />