onClick=“” don't appear at the actual element made with react.

问题

I'm making some elements with react like this:

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>
    );
  }
});

but on the actual rendered html page this div does not contain onClick property. Just looks like this.

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

How to make it appear?

回答1:

It won't appear in the rendered HTML, as the handler is attached to the DOM element itself. React also normalizes the event system across browsers so that it behaves consistently. I would suggest reading up on how it works at the official docs: https://facebook.github.io/react/docs/events.html

回答2:

Simply put:

1. onClick on jsx is not DOM-onClick-event but React-onClick-event.
2. React-onClick-event is belong to React, so it's not displayed on DOM.
3. React.js automatically convert React-onClick-event into DOM-onClick-event behind the scene.

来源：https://stackoverflow.com/questions/34913296/onclick-dont-appear-at-the-actual-element-made-with-react