单击应用在 <tr> tr 中也有按钮单击事件

Question

点击是在tr上应用的，在tr中还有按钮，我如何防止tr内的btn上的tr onlick事件和btn也有onclick事件！

<tr key={index} onClick={() => this.getDetailPage(jobsData)}>
<td>{serial_num}</td>
<td>{jobsData.status}</td>
<td>
<button onClick={() => this.editjob(jobsData)}>Edit</button>
</td>
</tr>;

Answer 1

如果我得到了它，您希望防止内部button将事件传播到外部tr。然后你可以做这样的事情：

<button onClick={(e) => {
e.preventDefault();
e.stopPropagation();
this.editjob(jobsData);
}
}>

Answer 2

您可以停止传播以停止捕获和冒泡阶段：

<tr
key={index}
onClick={(e) => {
e.stopPropagation();
this.getDetailPage(e, jobsData);
}}
>
<td>{serial_num}</td>
<td>{jobsData.status}</td>
<td>
<button onClick={() => this.editjob(jobsData)}>Edit</button>
</td>
</tr>

Answer 3

通过回调传递事件属性，然后添加：

event.stopPropagation();

这应该看起来像：

<tr key={index} onClick={(event) => event.stopPropagation();this.getDetailPage(jobsData)}>
<td>{serial_num}</td>
<td>{jobsData.status}</td>
<td><button onClick={(event) => event.stopPropagation();this.editjob(jobsData)}>Edit</button></td>
</tr>

此示例是对您的代码的回答。如果添加一个方法，则可以在方法中执行此操作。

function methodName(event) {
event.stopPropagation();
this.getDetailPage(jobsData)
}
<tr key={index} onClick={this.methodName}>
<td>{serial_num}</td>
<td>{jobsData.status}</td>
<td><button onClick={this.methodName}>Edit</button></td>
</tr>