我们可以在 HTML DOM 元素上一起应用 Reactjs 和 Jquery

Question

我是 ReactJS 的新手。我使用 reactJS JSX

创建了一个 DOM 元素

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>

我们可以在 HTML DOM 元素上一起应用 Reactjs 和 Jquery

Can we apply Reactjs and Jquery together on HTML DOM element

jquery

reactjs

react-jsx