onClick="" 不会出现在用 react 制作的实际元素上。

IT技术 javascript html web reactjs
2021-05-25 02:03:15

我正在制作一些像这样react的元素：

var AddNewTask = React.createClass({
  handleClick: function() {
   console.log('pressed!');
  },
  render: function() {
    return (
      <div className="addNewTask" onClick={this.handleClick}>
        <i className="material-icons">add</i>
      </div>
    );
  }
});

但在实际呈现的 html 页面上，此 div 不包含 onClick 属性。只是看起来像这样。

<div class="addNewTask" data-reactid=".0.2">
  <i class="material-icons"  data-reactid=".0.2.0">add</i>
</div>

如何让它出现？

2个回答

它不会出现在呈现的 HTML 中，因为处理程序附加到 DOM 元素本身。React 还规范了跨浏览器的事件系统，使其行为一致。我建议在官方文档中阅读它的工作原理：https : //facebook.github.io/react/docs/events.html

简单的说：

  1. onClick在 jsx 上不是DOM-onClick-event但是React-onClick-event。
  2. React-onClick-event 属于 React，所以不会显示在 DOM 上。
  3. React.js 自动转换React-onClick-event为DOM-onClick-event 幕后。
其它你可能感兴趣的问题
上一篇如何在生产过程中在电子react应用程序中路由 下一篇Kubernetes Nginx Ingress 和 Socket.io 连接问题