Можем ли мы применить Reactjs и JQuery вместе к элементу HTML DOM

Question

Я довольно новый в ReactJS. Я создал элемент DOM с помощью reactJSJSX

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

Теперь я хочу, чтобы применить некоторые jquery питания на этот элемент на основе какого-либо события, например, для:

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

Если это выполнимо. По какой-то причине мой код 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>