ReactJS - 未执行 onSubmit 函数

Question

我一直在尝试为我的电子商务项目实现一个 SignUp 组件，但是当我点击“注册”按钮（即 CustomButton 组件）时，“handleSubmit”函数根本没有被执行。我正在使用 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>
    );
  }
}

Answer 1

在构造函数中绑定handleSubmit：

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

阅读本文以了解为什么应该在 React 中绑定事件处理程序。

编辑

由于您使用的是箭头函数，因此上述解决方案可能不起作用。

我认为问题出在CustomButton. 我认为它应该是这样的：

class CustomButton {

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

关键是，真正的按钮或输入标签应该具有“提交”类型属性。

如果您想将 type 属性传递给按钮或输入标签，您可以执行以下操作（在 CustomButton.jsx 中）：

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