Click Me

Component that shows a click count

JSX


/** @jsx React.DOM */
var ClickMe = React.createClass({
  getInitialState: function() {
    return {clicks: 0};
  },
  handleClick: function() {
    this.setState({ clicks: this.state.clicks += 1 });
  },
  render: function() {
    return (<div className="clicker" onClick={this.handleClick}>I've been clicked {this.state.clicks} Times</div>);
  }
});
React.renderComponent(<ClickMe />, document.querySelector('#output'));

Javascript


var ClickMe = React.createClass({
  displayName: 'ClickMe',
  getInitialState: function() {
    return {clicks: 0};
  },
  handleClick: function() {
    this.setState({ clicks: this.state.clicks += 1 });
  },
  render: function() {
    return (React.DOM.div({ className: 'clicker', onClick: this.handleClick }, "I've been clicked ", this.state.clicks, " Times"));
  }
});
React.renderComponent(ClickMe(), document.querySelector('#output'));
Notes
  • Using onClick to bind an event
  • Events are delegated to body - view the source

Output