道具不传递给onClick函数

Question

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

onClick={this.handleEditsUpload}

至

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

selected将显示为selected: [] handleEditsUpload() selected: [] 。

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

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;
    }

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

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

Answer 2

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

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

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

所不同的是，这次您要为onClick分配箭头函数() => this.handleEditsUpload(...this.props) ，而不是返回值。