道具不傳遞給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) ，而不是返回值。