ReactJS - функция onSubmit не выполняется - PullRequest
Новая
       10

ReactJS - функция onSubmit не выполняется

0 голосов
/ 11 июля 2020

Я пытался реализовать компонент SignUp для своего проекта электронной коммерции, но функция handleSubmit вообще не выполняется, когда я нажимаю кнопку «Зарегистрироваться», то есть компонент CustomButton. использование Firebase для аутентификации, а также для базы данных, и любая помощь по этому поводу будет весьма признательна. Заранее спасибо. 

class SignUp extends Component {
  constructor() {
    super();
    this.state = {
      displayName: "",
      email: "",
      password: "",
      confirmPassword: ""
    };
  }

  handleSubmit = async event => {
    event.preventDefault();

    const { displayName, email, password, confirmPassword } = this.state;

    if (password !== confirmPassword) {
      alert("Passwords don't match");
      return;
    }

    try {
      const { user } = await auth.createUserWithEmailAndPassword(
        email,
        password
      );

      await createUserProfileDocument(user, { displayName });

      this.setState({
        displayName: "",
        email: "",
        password: "",
        confirmPassword: ""
      });
    } catch (error) {
      console.log(error);
    }
  };

  handleChange = event => {
    const { name, value } = event.target;

    this.setState({ [name]: value });
  };

  render() {
    const { displayName, email, password, confirmPassword } = this.state;
    return (
      <div className="sign-up">
        <h2 className="title">I do not have an account</h2>
        <span>Sign up with your email and password</span>
        <form className="sign-up-form" onSubmit={this.handleSubmit}>
          <FormInput
            type="text"
            name="displayName"
            value={displayName}
            onChange={this.handleChange}
            label="Display Name"
            required
          />
          <FormInput
            type="email"
            name="email"
            value={email}
            onChange={this.handleChange}
            label="Email"
            required
          />
          <FormInput
            type="password"
            name="password"
            value={password}
            onChange={this.handleChange}
            label="Password"
            required
          />
          <FormInput
            type="password"
            name="confirmPassword"
            value={confirmPassword}
            onChange={this.handleChange}
            label="Confirm Password"
            required
          />
          <CustomButton type="submit">SIGN UP</CustomButton>
        </form>
      </div>
    );
  }
}

1 Ответ

4 голосов
/ 11 июля 2020

Привязать дескриптор Отправьте в конструктор: 

constructor(){
    super();
    this.state = {
        displayName : '',
        email : '',
        password : '',
        confirmPassword : ''
    }
    this.handleSubmit = this.handleSubmit.bind(this);
}

Прочтите эту статью , чтобы узнать, почему вам следует связывать обработчики событий в React.

EDIT

Поскольку вы используете стрелочную функцию, указанное выше решение может не работать.

Я думаю, что проблема в CustomButton. Я думаю, он должен выглядеть так: 

class CustomButton {

   render() {
      return (
        <SomeTag>
          <button type="submit" someProps={someValue}>
              {someTitle}
          </button>
          // or <input type="submit" />
        </SomeTag>
      );
   };
}

Дело в том, что настоящая кнопка или тег ввода должны иметь атрибут типа "submit".

Если вы хотите передать атрибут типа в кнопку или тег ввода, вы можете сделать следующее (в CustomButton.jsx): 

<button someProp={someValue} {...props}>
   {someTitle}
</button>
...