Anchor-Tag Verhalten auf <tr> Element in Reaktion

Question

Ich bin eine Anwendung mit einer Komponente Reagieren schaffen, die etwa wie folgt aussieht:

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

Ich möchte die < tr> Tag wie ein < ein verhalten> Tag, wo Sie können:

1. Sie darauf und haben es gehen Sie zu "some-url"
2. Befehl + klicken Sie darauf und haben es gehen Sie zu „some-url“ aber in einem neuen Tab

Szenario 1 ist einfach, da ich eine onClick Eigenschaft auf den < tr hinzufügen>, aber wenn Sie Befehl versuchen + Klicken Sie darauf, es öffnet sich nicht in einem neuen Tab.

Ich möchte nicht die gesamte Komponente innerhalb eines < einem> Tag wickeln, da Reagieren wirft eine Warnung sagen, dass ein < tbody> -Tag nicht < ein> -Tags als Kinder haben sollte. Ich möchte auch nicht alle < td Tags unter einem < ein> Tag wickeln, da eine ähnliche Warnung ausgelöst wird.

Answer 1

Haben nicht versucht, reagieren, aber ich habe versucht, Ihr Problem mit nur Javascript zu lösen.

Schauen Sie sich diese 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

fand ich diesen Beitrag und es befasst sich genau das, was ich tun möchte: https://til.hashrocket.com/posts/a2c54cc97a-cmdclick-a-link-open-in-a-new-tab-with-javascript

im Wesentlichen im Rahmen der event Objekt, das ist zu handleübergeben, kann ich feststellen, ob die metaKey auch verwendet wurde. Und wenn es ist, dann kann ich es in einem neuen Tab öffnen.