egoist
9/9/2015 - 2:55 PM

child-parent.js

var App = React.createClass({
  getInitialState: function () {
    return {
      checked: false
    }
  },
  handleCallbackCheck: function (checked) {
    this.setState({
      checked: checked
    })
  },
  render: function () {
    return (
      <div>{this.state.checked.toString()}
      <Todo checked={this.state.checked} callbackCheck={this.handleCallbackCheck} />
      </div>
    )
  }
})

var Todo = React.createClass({
  getInitialState: function () {
    return {
      checked: this.props.checked
    }
  },
  handleCheck: function () {
    var newChecked = this.state.checked ? false : true
    this.setState({
      checked: newChecked
    })
    this.props.callbackCheck(newChecked)
  },
  render: function () {
    var style = this.state.checked ? 'line-through' : 'none'
    return <div style={{textDecoration:style}} onClick={this.handleCheck}>Rule the web</div>
  }
})

React.render(<App />, document.body)