javascript - Anchor tag behavior on <tr> element in React -

i'm creating react application component looks this:

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

i want <tr> tag behave <a> tag, can:

1. click on , have go "some-url"
2. command+click on , have go "some-url" in new tab

scenario 1 simple since can add onclick property onto <tr>, when try command+clicking on it, doesn't open in new tab.

i don't want wrap entire component within <a> tag since react throws warning saying <tbody> tag shouldn't have <a> tags children. don't want wrap <td> tags under 1 <a> tag since similar warning thrown.

haven't tried react, tried solved issue javascript.

check out fiddle

//delegate click events on table document.getelementbyid("table-with-anchors").addeventlistener("click", function(e){   //check if targeted tr set anchor   if (e.target && e.target.parentelement.classlist.contains("tr-as-anchor")) {     //do stuffs here.     window.open('', '_blank');   }   else {     alert("you selected tr without anchor");   } });