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)