的onClick =＆＃34;＆＃34;不要出现在做出反应的实际元素上。

Question

我正在制作一些反应如下的元素：

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>

如何让它出现？

Answer 1

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

Answer 2

简单地说：

jsx上的
1. onClick不是DOM-onClick-event，而是React-onClick-event。
2. React-onClick-event属于React，因此不会显示在DOM上。
3. React.js会自动将React-onClick-event转换为场景后面的DOM-onClick-event 。