React复选框不发送onChange
发布时间:2020-12-15 06:51:02 所属栏目:百科 来源:网络整理
导读:TLDR:使用defaultChecked而不是选中,在这里工作jsbin http://jsbin.com/mecimayawe/1/edit?js,output 尝试设置一个简单的复选框,当它被选中将交叉标签文本。由于某种原因,当我使用组件时,handleChange不会被触发。任何人都可以解释我做错了什么? var C
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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |