如何防止 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道具不可用。