テーブル セルに onClick (React) ハンドラーがあり、適切に起動しますが、hrefタグに「新しいタブで開く」機能を持たせたいと考えています。
もちろん、両方を 1 つの要素に組み合わせようとすると、期待どおりには機能しません。
<td onClick={this.someFunction} href="someLink">
...some content
<td>
以前、私はテーブルセル内にネストされたアンカータグを全高に広げることを検討しました。これにより、セルのコンテンツが右クリックされるたびに、「新しいタブで開く」ことができ、onClickテーブルセル要素のハンドラーを保持できるようになりました。ただし、このアプローチにはさまざまな問題があります。ここで概説する。
TLDR: オーバーライドすると他の問題が発生します。ソリューションにはさまざまな互換性の問題があります。
そこで、私はそのアプローチを捨てて、上で説明した方法を採用しました。アイデアや提案はありますか? アンカー/href を使用せずに「新しいタブで開く」オプションを使用する方法はありますか?
ベストアンサー1
ここでは 2 つのオプションがあり、JS を使用して新しいウィンドウ/タブで開くことができます。
<td onClick={()=> window.open("someLink", "_blank")}>text</td>
しかし、より良い選択肢は、通常のリンクを使用しながら、それをテーブル セルとしてスタイル設定することです。
<a style={{display: "table-cell"}} href="someLink" target="_blank">text</a>