如何防止 ReactJS onclick function 在渲染上運行

Question

我不希望在頁面加載時調用 function 但僅在用戶實際單擊該行時調用

以下是我的基本片段：

JS

function readDetails(id){
    console.log(id)
}

JSX

<tr key={data.id} onClick={() => { readDetails (data.id)} }>

Answer 1

方法一：

<tr key={data.id} onClick={() => readDetails(data.id)}>

方法二：

const readDetails = (id) => {
  return () => {
    console.log(id)
  }
}

<tr key={data.id} onClick={readDetails(data.id)}>

Answer 2

您可以通過更改來解決此問題

<tr key={data.id} onClick={readDetails (data.id)}>

對此：

<tr key={data.id} onClick={() => { readDetails(data.id) }}>

您還應該能夠像這樣刪除額外的花括號：

<tr key={data.id} onClick={() => readDetails(data.id)}>

這將在 React 0.13.3 或更高版本上得到支持。

Answer 3

經過多次試驗，我意識到calling a function within a table element doesn't really work well in ReactJS 。 解決此問題的最佳選擇是使用divs並將它們設置為適合我的tabular pattern 。

然后我就這樣通過了function

<div key={data.id} onClick={() => readDetails(data.id)}>
    Table Data
</div>

Answer 4

您可以通過更改來解決此問題

<tr key={data.id}  onClick={function (e) {
e.preventDefault();
this.readDetails(data.id);
.bind(this)}></tr>

Answer 5

考慮到您的示例中有一個key道具，我假設您正在循環一個數組（或類似的東西）並輸出一個<tr>元素的集合。 因此，我建議您定義一個 function ，您可以參考，而不是為每個循環定義一個新的 function 以提高效率：

const readDetails = (e) => console.log(e.target.getAttribute('data-id'));

<tr key={data.id} data-id={data.id} onClick={readDetails}>

但是，您必須定義一個額外的道具（在本例中為 data-id），因為key道具不可用。