TLDR:使用defaultChecked而不是选中,在这里工作jsbin
http://jsbin.com/mecimayawe/1/edit?js,output
尝试设置一个简单的复选框,当它被选中将交叉标签文本。由于某种原因,当我使用组件时,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);
解:
使用checked不允许底层值改变(显然),因此不调用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> ); } });
要获得复选框的选中状态,路径将是:
this.refs.complete.state.checked
另一种方法是从事件传递到handleChange方法中获取它:
event.target.checked
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。