TypeError：无法读取未定义的属性“验证”

Question

我正在尝试验证我的注册表单，但我收到了这个错误并且我无法解决它。我的表单提交按钮转到handleRegistration，它应该首先验证表单然后提交。我试图按照此链接中的示例https://www.itsolutionstuff.com/post/password-and-confirm-password-validation-in-reactexample.html

handleRegistration(event) {
  event.preventDefault();
  if (this.validate()) {
    this.toggleModal();
    console.log(this.state);
    let input = {};
    input["name"] = "";
    input["email"] = "";
    input["password"] = "";
    input["confirmPassword"] = "";
    input["age"] = "";
    input["gender"] = "";
    this.setState({
      input: input
    });
    console.log(this.state)
    alert('Demo Form is submited');
  }
}

validate() {
  let input = this.state.input;
  let errors = {};
  let isValid = true;

  if (!input["fullname"]) {
    isValid = false;
    errors["fullname"] = "Please enter your name.";
  }

  if (!input["email"]) {
    isValid = false;
    errors["email"] = "Please enter your email Address.";
  }

  if (typeof input["email"] !== "undefined") {

    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    if (!pattern.test(input["email"])) {
      isValid = false;
      errors["email"] = "Please enter valid email address.";
    }
  }

  if (!input["password"]) {
    isValid = false;
    errors["password"] = "Please enter your password.";
  }

  if (!input["confirmPassword"]) {
    isValid = false;
    errors["confirmPassword"] = "Please confirm your password.";
  }

  if (!input["age"]) {
    isValid = false;
    errors["age"] = "Please Enter your age.";
  }

  if (typeof input["password"] !== "undefined" && typeof input["confirmPassword"] !== "undefined") {

    if (input["password"] != input["confirmPassword"]) {
      isValid = false;
      errors["password"] = "Passwords don't match.";
    }
  }

  this.setState({
    errors: errors
  });

  return isValid;
}

handleChange(event) {
  let input = this.state.input;
  input[event.target.name] = event.target.value;

  this.setState({
    input
  });
}

我在这里初始化我的输入和错误对象

this.state = {
  isNavOpen: false,
  isModalOpen: false,
  isRegistrationModalOpen: false,
  input: {},
  errors: {}
}

我的注册表是这样的结构

<Form onSubmit={this.handleRegistration}>
  <FormGroup>
    <Input type="text" id="fullname" name="fullname" placeholder="Full Name" value={this.state.input.name} onChange={this.handleChange}></Input>
    <div className="text-danger">{this.state.errors.name}</div>
  </FormGroup>
  ....
</Form>

谢谢

Answer 1

问题

<Form onSubmit={this.handleRegistration}>

this.handleRegistration 没有绑定到类（组件），因此this 不引用类实例。

解决方案

将方法声明为箭头函数。这样它将是实例方法，但不在原型上，因此this 将引用实例。

handleRegistration(event) {

到

handleRegistration = (event) => { 

更多信息：https://reactjs.org/docs/faq-functions.html#class-properties-stage-3-proposal。