道具不传递给onClick函数

Question

我有一个onClick可以上传数据，我需要将道具从其内部传递给该onclick函数。

onClick={this.handleEditsUpload}

到

handleEditsUpload() {
  const { selected } = this.props;
}

selected在selected: []中显示为handleEditsUpload()。

我尝试通过以下方式传递道具：

onClick={this.handleEditsUpload(...this.props)}

我认为在其他地方也可以使用。

不知道从这里去哪里，有什么建议吗？

Answer 1

您无需将道具专门传递给handleEditsUpload事件处理程序函数

更改

  onClick={this.handleEditsUpload(...this.props)}

收件人

 onClick={this.handleEditsUpload}

因为this.props可直接在handleEditsUpload中使用。

您需要确定的是，是否在构造函数中对handleEditsUpload进行了绑定。如果没有，则在构造函数中添加以下行

      this.handleEditsUpload = this.handleEditsUpload.bind(this);

所以现在您将可以访问handleEditsUpload函数中的道具

    handleEditsUpload(){
         const { selected } = this.props;
    }

不需要将道具传递给处理函数，因此我不建议这样做。如果您仍然想使用该方法，请以箭头方式调用该函数，因为您需要传递参数

   onClick={() => this.handleEditsUpload(...this.props)}

Answer 2

您要发送onClick函数的结果而不是其引用。 在onClick={this.handleEditsUpload(...this.props)}期间发生的情况是，使用提供的props调用handleEditsUpdload，然后将其返回值（在这种情况下为null）分配给onClick。

如果要在单击按钮时调用handleEditsUpload，请改为为其提供函数引用：

onClick={() => this.handleEditsUpload(...this.props)}

区别在于，这次您是将箭头功能() => this.handleEditsUpload(...this.props)分配给onClick，而不是返回值。