我们可以将Reactjs和Jquery一起应用于HTML DOM元素

Question

我在ReactJS中很新颖。我创建使用reactJSJSX

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

现在我想申请基于一些事件如该元素在某些jquery东西DOM元素：

$("#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>