javascript - 为什么只有在之后才执行验证？

Question

我想制作一个验证姓名和电子邮件的表单。测试进行得很好。问题是它只吸收一个接一个的动作。说明：如果你在名字的文本框中写了一个有效的电子邮件，按钮仍然不起作用。只有在下一次单击按钮时，他才会发现这一点并激活按钮。（即使下一步操作是删除电子邮件或添加无效字符，它也会确认。）

  constructor(props) {
    super(props);
    this.state = {
      EmailError: true,
      emailHelperText: "",
      nameHelperText: "",
      nameError: false,
      errorCheck: true,
    };
  }

  onChange(event) {
    if (event.target.value.length > 2) {
      this.setState({ nameHelperText: "", nameError: false });
      this.ifErrors();
    } else {
      this.setState({ nameHelperText: "נא למלא שם", nameError: true });
      this.ifErrors();
    }
  }
  validateEmail(e) {
    var email = e.target.value;

    if (validator.isEmail(email)) {
      this.setState({ EmailError: false, emailHelperText: "" });
      this.ifErrors();
    } else {
      this.setState({ EmailError: true, emailHelperText: "נא למלא מייל תקין" });
      this.ifErrors();
    }
  }

  ifErrors = () => {
    console.log(
      "nameError",
      !this.state.nameError,
      "EmailError",
      !this.state.EmailError
    );
    console.log(!this.state.nameError && !this.state.EmailError)
    if (!this.state.nameError && !this.state.EmailError) {
      this.setState({ errorCheck: false });
    } else {
      this.setState({ errorCheck: true });
    }
  };

  <Grid item xs={4}>
              <TextField
                helperText={this.state.nameHelperText}
                onChange={this.onChange.bind(this)}
                error={this.state.nameError}
                required
                id="outlined-required"
                label="שם מלא"
              />
            </Grid>
            <Grid item xs={4}>
              <TextField
                helperText={this.state.emailHelperText}
                onChange={this.validateEmail.bind(this)}
                error={this.state.EmailError}
                required
                id="outlined-required"
                label="דואר אלקטרוני"
              />

标签： javascriptreactjs