2017-04-02 21 views
0

JavaScript(ReactJS)のマップの機能を使ってテーブルを構築しています。テーブルの行の中にポップオーバーが表示されない

最後の列に、(最終的に)情報を保持するポップオーバーを開くためのボタンが必要です。このセルは次のように行われています:

<td> 
    <div> 
     <button className="btn btn-primary" 
       tabIndex="0" 
       role="button" 
       data-toggle="popover" 
       data-trigger="focus" 
       title="Details" 
       data-content="Testing, Testing"> 
       <b>IN PIT</b> 
     </button> 
    </div> 
</td> 

これまでのところ、このボタンは表示されますが、ポップオーバーはありません。私はフロントエンドのデザイナーではないので、npmやその他のものは使用していません。それは設定が簡単ではないようです。私はちょうどテスト目的のために "十分に良い"ものを望んでいます。

私には何が欠けていますか?

+0

まず、あなたのjsxは無効です。あなたの '

+0

私は最初からそれを持っていました、コードをコピーする間違いだったのでしょうか、残念です。 – edwardffs

答えて

1

https://pastebin.com/KuRHjWxrをご覧ください。人身売買はうまくいかず、他の方法で実装する必要があります。 DOMにボタンがない場合、 $('[data-toggle="popover"]').popover(); $('[data-toggle="tooltip"]').tooltip();を開始します。

ボタンがDOMに正常にレンダリングされた後に.popover().tooltip()と呼び出してください。

+0

ウェブを精練した後、私がしなければならなかったのは、それらの2本のラインを変えただけだった...あなたは命の恩人だよ、ありがとう! – edwardffs

+1

私は助けてくれることができてうれしいです、歓声! – loelsonk

1

属性の名前は、機能を提供するためにブートストラップ(外部ライブラリ)がロードされ、要素に添付されることを期待していることを意味します。ブートストラップはページのスクリプトタグに含まれていますか?これらの属性は自分自身では何もしません。アクションをアタッチするためのタグに過ぎません。 addressタグの末尾にbootstrap cdnタグを追加します。

+0

あなたはindex.htmlのリンクを意味しますか?私はそれらが正しいと思う... とにかく、私のファイルの内容は現時点ではここにある:https://pastebin.com/ekQLjmYM ありがとう! – edwardffs

+0

このページは、ポップオーバーを使用するために余分な依存関係が必要であることを意味します。 https://v4-alpha.getbootstrap.com/components/popovers/ – EMC

+0

ここにあるように、依存関係を更新しました:https://pastebin.com/KuRHjWxr まだ何もありません。 ReactJSのポップオーバーをあきらめたら何時間もかかりましたか? – edwardffs