handleEvent, onEvent and this.props.onEvent


#1

It's the code about Talker.js


var React = require('react');
var ReactDOM = require('react-dom');
var Button = require('./Button');

var Talker = React.createClass({
  handleClick: function () {
    for (var speech = '', i = 0; i < 10000; i++) {
      speech += 'blah ';
    }
    alert(speech);
  },
  
  render: function () {
    return <Button onClick={this.handleClick} />;
  }
});

ReactDOM.render(
  <Talker />,
  document.getElementById('app')
);

And here's the code about Button.js:


var React = require('react');

var Button = React.createClass({
  render: function () {
    return (
      <button onClick={this.props.onClick}>
        Click me!
      </button>
    );
  }
});

module.exports = Button;

Who could explain me why, in the Button.js, I need to code:

<button onClick={this.props.onClick}>
        Click me!
</button>

What does it mean there {this.props.onClick}?
Or, who wants could explain me the entire reasonment under this exercise. I think to get the argument, but I'm not sure at all.

Cheers!


#7

I am having the same question...


#8

It is a reference to the prop name, onClick which is defined in the render function of the parent component. The prop in the parent component is {this.handleClick} which is passed to the Button component so that when a user clicks the button, it triggers the event handler, handleClick.


#10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.