Question

我正在创建一个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>
        );
    }
}

我想要＆lt; tr ＆gt;标记的行为类似于＆lt; a ＆gt;标签，你可以：

点击它，然后转到＆＃34; some-url＆＃34;
命令+点击它并让它转到＆＃34; some-url＆＃34;但是在新标签中

方案1很简单，因为我可以在＆lt; tr ＆gt;上添加onClick属性，但是当您尝试命令+点击它时，它不会打开在新标签中。

我不想将整个组件包装在＆lt; a ＆gt;中标签，因为React会发出警告，说明＆lt; tbody ＆gt;标签不应该＆lt; a ＆gt;标签作为孩子。我也不想包装所有＆lt; td ＆gt;一个＆lt; a ＆gt;下的标签标签，因为抛出了类似的警告。

Answer 1

Haven没有尝试过反应，但我试图用javascript解决你的问题。

查看此Fiddle

//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");
  }
});

Answer 2

我找到了这篇文章，它完全解决了我想要做的事情：https://til.hashrocket.com/posts/a2c54cc97a-cmdclick-a-link-open-in-a-new-tab-with-javascript

基本上，作为传递给handleClick的event对象的一部分，我可以确定是否也使用了metaKey。如果是，那么我可以在新标签中打开它。

React

2 个答案: