ReactjsとJqueryをHTML DOM要素で一緒に適用できますか

Question

私はReactJSでかなり新しいです。

$("#viewThis").click(function() { 
    //Code goes here 
}) 

これはなんとかある場合：私は今、私は例えばのためのいくつかのイベントに基づいて、その要素の上にいくつかのjqueryのstuffsを適用したいreactJSJSX

var Button = React.createClass({ 
    render: function() { 
     return <div><button className="btn btn-primary" id="viewThis"> View This</button></div> 
    },   
}); 

を使用してDOM要素を作成しました。何らかの理由で私のjqueryコードが動作していません。

Answer 1

これは、クリックハンドラを動的に生成された要素にバインドしようとしているためです。

Click event doesn't work on dynamically generated elements

const App =() => (
 
    <div> 
 
    <button className="btn btn-primary" id="viewThis"> View This</button> 
 
    </div> 
 
); 
 

 
ReactDOM.render(<App />, document.getElementById('app')); 
 

 
$('#app').on('click', '#viewThis',() => console.log('clicked'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

あなたはおそらくちょうどコンポーネントでonClickを使用したい：

const App =() => (
 
    <div> 
 
    <button className="btn btn-primary" onClick={() =>console.log('clicked')}> View This</button> 
 
    </div> 
 
); 
 

 
ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

あなたはこの問題を回避することができますが