錨標籤的行爲做出反應

我創建，看起來像這樣的部件的陣營應用：錨標籤的行爲做出反應

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>標籤的行爲像一個< 一>標籤，在這裏你可以：它

點擊有它去「的一些-URL」
命令+點擊它，擁有它去「的一些-URL」，但在新標籤

方案1是簡單的，因爲我可以添加一個onClick財產到< TR>，但是當你嘗試命令+點擊它，它不會在新標籤中打開。

我不想一個< 一個>標記中包裹整個組件，因爲陣營拋出一個警告說，一個< TBODY>標籤不應該有< 一個>標記的孩子。我也不想將所有的標籤都包裝在一個< >>標籤下，因爲會引發類似的警告。

來源

2016-04-20 wmock

**我也不想將所有標籤包裝在一個 **下，如何將''作爲子元素添加到''？ –

不幸的是，我不想這樣做 - 主要原因是因爲我想單擊內的任何地方，並能夠轉到網址。 – wmock

還沒有試過反應，但我試圖用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"); 
    } 
});

來源

2016-04-20 03:31:12

感謝您的建議！ – wmock

我發現這個職位它解決正是我想做的事：https://til.hashrocket.com/posts/a2c54cc97a-cmdclick-a-link-open-in-a-new-tab-with-javascript

從本質上講，它被傳遞到handleClick的event對象多數民衆贊成的一部分，我能確定是否也使用了metaKey。如果是，那麼我可以在新標籤中打開它。

來源

2016-04-20 21:11:24 wmock

錨標籤的行爲做出反應

回答

相關問題