Javascript 物料UI特定文本字段验证意外行为

在Node上运行一个项目，并让React上的前端也设置.env变量，我用materialui和提供的所有textfield构建了它，并按照预期进行了特定的验证。除了与其他字段一样使用相同模式的字段外，它不会获取任何输入或进行任何类型的验证。如果我遗漏了什么或者如何解决这个问题，有人能给我指点一下吗

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>
    );
  }
}

类仪表板扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
// ...
serviceHTTPSCa:“”，
serviceHTTPSCaError:“
}
// ...
this.handleChangeServiceHTTPSCa=this.handleChangeServiceHTTPSCa.bind（this）；
}
handleChangeServiceHTTPSCa（事件）{
if（event.target.value.match（/^（[a-z0-9_-]+）.crt$/i））{
这是我的国家({
serviceHTTPSCa:event.target.value，
serviceHTTPSCaError:“”，
});
}否则{
这是我的国家({
serviceHTTPSCaError:“格式无效！”
});
}
}
render（）{
返回(
{/*其他一些标记*/}
{/*其他一些标记*/}
);
}
}

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 });
  }
}

handleChangeServiceHTTPSCa（事件）{
如果（！event.target.value.match（/^（[^（）\[\]\\，；：\s@“+（\.[^（）\[\]\，；：\s@“]+）*）（“+”）（（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9].[1,3}.]}.[1,3}.]{
这是我的国家({
serviceHTTPSCa:event.target.value，
serviceHTTPSCaError:'电子邮件地址不可用'，
},()=>{
如果（this.state.serviceHTTPSCa===''）{//检查输入是否为空
this.setState（{serviceHTTPSCaError:false}）
});
}否则{
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"
          />

errorText

sboull是

{this.state.serviceHTTPSCaError}

errorText

sboull是

{this.state.serviceHTTPSCaError}

。我刚刚编辑了我的答案，以便在输入为空时能够关闭验证。