は+ jQueryのに反応 - >ボタンのonClickはReactJSを使用し

Question

作業とjQueryされていない私はそうのように、私のコンポーネントのIDの特定のdivに動的にボタンを追加しています：

$('id_name').html('<button>..text..</button>); 

しかし、これらのボタンのそれぞれは、onClickの機能を持っている必要がありますそれは私の問題がどこにあるのかです。

私は助けを必要とコードはこれです：

export default React.createClass({ 

     .... 

    for(var i = 0; i<this.state.cells.length; i++){ 
      var id = '#'+this.state.cells[i]; 
      var mb = $(id).text(); 
      if(mb.length==0){ 
      $(id).html("<div id='"+ id +"' class='time-slot'> \ 
          <button onClick="+this.buttonActivated()+"> \ 
           <span id='message-"+id+"'>Not Assigned</span> \ 
          </button> \ 
         </div>"); 
      } 
    } 

     .... 

    buttonActivated: function(){ 
     console.log("Button Clicked"); 
    }, 

     .... 

}); 

実際に何が起こっていることは、このページには、機能をレンダリングするときにレンダリングされているすべてのボタンに自動的に実行されるということですので、私は15件のコンソールログを取得しています"Button Clicked"と言っていますが、いずれかのボタンをクリックするとその機能は起動しません。

Answer 1

「React」のように別のDOM要素にDOM要素を挿入しないでください。 JSXでレンダリングし、関数からカッコを削除する必要があります。あなたのコンストラクタで 、追加：

this.buttonActivated = this.buttonActivated.bind(this) 

をあなたのif文では、実行します。

if(mb.length==0){ 
      $(id).html(<div id={idAsAParam} className="time-slot"> 
         <button onClick={this.buttonActivated}> 
          <span id={"message-"+idAsAParam}>Not Assigned</span> 
         </button> 
       </div>); 
      } 

これだけ別のDOMオブジェクトへのhtml /要素を挿入する擬似提案です。 コンポーネントのレンダリング機能内で状態の変更を介して挿入を行うことをお勧めします。

このように反応すると、リッスンするクリックイベントが認識されます。