Блог

Я пытаюсь проверить свою регистрационную форму, но получаю эту ошибку и не могу ее решить. моя кнопка отправки формы переходит к 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" amp;amp; 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>
  

Спасибо

Проблема

 <Form onSubmit={this.handleRegistration}>
  

this.handleRegistration не был привязан к классу (компоненту), поэтому this не ссылается на экземпляр класса.

Решение

Объявите метод как функцию со стрелкой. Таким образом, это будет метод экземпляра, но не в прототипе, поэтому this он будет ссылаться на экземпляр.

 handleRegistration(event) {
  

Для

 handleRegistration = (event) => { 
  

Дополнительная информация: https://reactjs.org/docs/faq-functions.html#class-properties-stage-3-proposal .