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>

onClick不触发点击处理程序

1 个答案: