反应中<tr>元素的锚定标记行为
反应中<tr>元素的锚定标记行为
提问于 2016-04-20 01:27:42
我正在创建一个具有如下内容的组件的React应用程序：
class TableRow extends React.Component {
constructor(props) {
super(props)
}
render() {
const handleClick = () => window.location.href = "some-url";
return (
<tr>
<td>Something 1</td>
<td>Something 2</td>
<td>Something 3</td>
<td>Something 4</td>
</tr>
);
}
}我希望<tr>标记能够像<a>标记那样运行：
- 点击它，让它转到“一些-url”
- command+click在上面，让它转到“some”，但是在一个新的选项卡中
场景1很简单，因为我可以将onClick属性添加到<tr>，但是当您尝试使用command+clicking时，它不会在新选项卡中打开。
我不想将整个组件包装在<a>标记中，因为React抛出了一个警告：<tbody>标记不应该作为子标记具有<a>标记。我也不想将所有<td>标记包装在一个<a>标签下，因为会引发类似的警告。
回答 2
Stack Overflow用户
发布于 2016-04-20 03:31:12
还没试过反应，但我试着用javascript来解决你的问题。
看看这个小提琴
//delegate click events on the table
document.getElementById("table-with-anchors").addEventListener("click", function(e){
//check if the targeted tr is set to be as an anchor
if (e.target && e.target.parentElement.classList.contains("tr-as-anchor")) {
//Do your stuffs here.
window.open('', '_blank');
}
else {
alert("You selected tr without anchor");
}
});Stack Overflow用户
发布于 2016-04-20 21:11:24
我找到了这篇文章，它准确地说明了我想做的事情：https://til.hashrocket.com/posts/a2c54cc97a-cmdclick-a-link-open-in-a-new-tab-with-javascript
本质上，作为传递给handleClick的handleClick对象的一部分，我可以确定是否也使用了metaKey。如果是的话，我可以在一个新的标签里打开它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36732260
复制相关文章
相似问题
腾讯云开发者
