javascript - onClick 不触发点击处理程序

Question

我的点击处理程序未触发:

submitForm(UserDetails) {
    axios
        .post('http://localhost:3001/api/users', UserDetails)
        .then(function(response) {
            console.log(response);
        })
        .catch(function(error) {
            console.log(error);
        });
} 

在我的按钮上:

<button
            className="btn btn-primary"
            onClick={this.submitForm(this.props.UserDetails)}>
            Upload
        </button>

我已在我的构造函数中将其绑定(bind)到此:

constructor() {
    super();
    this.submitForm = this.submitForm.bind(this);
}

有什么想法吗？

Answer 1

在 onClick Hook 中，您调用函数而不是传递函数的引用

<button
  className="btn btn-primary"
  onClick={this.submitForm(this.props.UserDetails)}>
  Upload
</button>

从构造函数中删除绑定(bind)

this.submitForm = this.submitForm.bind(this);

并将适当的函数传递给 onClick

<button
  className="btn btn-primary"
  onClick={(e) => this.submitForm(this.props.UserDetails)}>
  Upload
</button>