特定于材质UI的Textfield验证意外行为

负273

我在Node上运行一个项目，并在React的前端也设置.env变量，我已经使用Material UI构建了该项目，并且所有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>
    );
  }
}

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"
          />

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。