反应checkbox不发送onChange
TLDR：使用defaultChecked而不是检查，在这里工作jsbin http://jsbin.com/mecimayawe/1/1/edit?js,output
尝试设置一个简单的checkbox，当它被选中时，它会将其标签文本划掉。 出于某种原因，当我使用组件时，handleChange没有被激发。 任何人都可以解释我做错了什么？
var CrossoutCheckbox = React.createClass({ getInitialState: function () { return { complete: (!!this.props.complete) || false }; }, handleChange: function(){ console.log('handleChange', this.refs.complete.checked); // Never gets logged this.setState({ complete: this.refs.complete.checked }); }, render: function(){ var labelStyle={ 'text-decoration': this.state.complete?'line-through':'' }; return ( <span> <label style={labelStyle}> <input type="checkbox" checked={this.state.complete} ref="complete" onChange={this.handleChange} /> {this.props.text} </label> </span> ); } }); 用法：
React.renderComponent(CrossoutCheckbox({text: "Text Text", complete: false}), mountNode);
解：
使用选中不会让底层值更改（显然），因此不会调用onChange处理程序。 切换到defaultChecked似乎解决了这个问题：
var CrossoutCheckbox = React.createClass({ getInitialState: function () { return { complete: (!!this.props.complete) || false }; }, handleChange: function(){ this.setState({ complete: !this.state.complete }); }, render: function(){ var labelStyle={ 'text-decoration': this.state.complete?'line-through':'' }; return ( <span> <label style={labelStyle}> <input type="checkbox" defaultChecked={this.state.complete} ref="complete" onChange={this.handleChange} /> {this.props.text} </label> </span> ); } });
要获得checkbox的选中状态，path是：
this.refs.complete.state.checked
另一种方法是从传递给handleChange方法的事件中获取它：
event.target.checked
在素材ui中，checkbox的状态可以被提取为
this.refs.complete.state.switched
