2017-07-11 15 views
1

私はonClick(React)ハンドラをテーブルセルに正しく配置していますが、 "Open in a New Tab"タグのhrefはあなたに与えます。予想通り、単一の要素の両方を兼ね備えしようとhrefを "新しいタブで開く" onClickハンドラを使用して

は動作しません、もちろん:

<td onClick={this.someFunction} href="someLink"> 
    ...some content 
<td> 

は、以前私はテーブルのセル内にネストされたアンカータグには完全な高さにまたがる持つに見えたので、いつでもセルの内容を右クリックしたときに、「新しいタブで開く」ことができましたが、テーブルセルの要素にはonClickハンドラを保持してください。しかし、そのアプローチには様々な問題があります。outlined here

TLDR:上書きすると他の問題が発生します。ソリューションにはさまざまな互換性の問題があります。

私は上記の方法でそのアプローチを断った。アイデア/提案? アンカー/ hrefを使用せずに[新しいタブで開く]オプションを使用する方法はありますか?

+0

おそらくこれの複製:https://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-and-not-a-new-window-using-javascript – maxhallinan

+0

テーブルセル要素のhref? –

+0

@ RokoC.Buljanはい、私はどのように奇妙なその音を知っています。私はそれを例として示していました。もともとは、テーブルセルの内部に 'href'というアンカータグがありましたが、アンカータグを完全な高さに渡すことは、ポジショニングを乱すことなく実行可能なオプションには見えません。 – Jose

答えて

6

あなたはJSで新しいウィンドウ/タブで開くことができます、ここでは2つのオプションがあります。

<td onClick={()=> window.open("someLink", "_blank")}>text</td> 

しかし、より良いオプションは、表のセルとして、通常のリンクが、スタイル、それを使用することです。

<a style={{display: "table-cell"}} href="someLink" target="_blank">text</a> 
関連する問題