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>

我将其绑定到我的构造函数中：

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

有任何想法吗？

Answer 1

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

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

从构造函数中删除绑定

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

并将适当的函数传递给onClick

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