![](/img/trans.png)
[英]How can i make the entire row of a table clickable in react js using <Link> or any other way?
[英]How can I add a button inside a clickable row in a table
我不确定这是否可能,但我有一个表,每行都有一个 onClick 事件,将用户引导到另一个页面。 我需要在每一行内添加一个按钮来处理单独的事件。 但是每次我单击按钮时,都会触发重定向到新页面的操作。 是否可以在另一个内部有点击事件?
例子:
items.map((item) => {
return(
<tr onClick={onClick(item.value)}>
<td>{item.Name}</td>
<td>
{visitCreated}
<span>
<button
type="button"
onClick={handlePreview(item.referenceID)}>
Preview
</button>
</span>
</td>
<td>{item.Encounters}</td>
</tr>
})
任何时候我点击这两个事件都会被触发。 我怎样才能隔离它们?
最快的方法是将 onClick 处理程序包装在箭头 function 中:
onClick={()=>onClick(item.value)}
onClick={()=>handlePreview(item.referenceID)}
items.map((item) => {
return(
<tr onClick={()=>onClick(item.value)}>
<td>{item.Name}</td>
<td>
{visitCreated}
<span>
<button
type="button"
onClick={()=>handlePreview(item.referenceID)}>
Preview
</button>
</span>
</td>
<td>{item.Encounters}</td>
</tr>
})
可以做这样的事情:
document.querySelector("button").addEventListener("click", function(e) { console.log("Clicked the button"); e.stopPropagation(); e.preventDefault(); }); const rowClick = (event) => { console.log("Clicked the row"); };
tr { display: flex; } td { border: 3px solid; }
<table> <tr onclick={rowClick()}> <td>{item.Name}</td> <td> {visitCreated} <span> <button class="previewButton" type="button" > Preview </button> </span> </td> <td>{item.Encounters}</td> </tr> </table>
您可以在按钮上添加一个 id,并检查目标是否具有此 id 以防止一个或另一个事件。 就像是
function onClick(event) {
if (event.target.id !== 'button_id') {
// do something
}
event.stopPropagation()
}
function handlePreview(event) {
if (event.target.id === 'button_id') {
// do something else
}
event.stopPropagation()
}
...
items.map((item) => {
return(
<tr onClick={onClick(item.value)}>
<td>{item.Name}</td>
<td>
{visitCreated}
<span>
<button
type="button"
id="button_id"
onClick={handlePreview(item.referenceID)}>
Preview
</button>
</span>
</td>
<td>{item.Encounters}</td>
</tr>
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.