React复选框不发送onChange
React复选框不发送onChange
提问于 2014-10-29 02:26:53
jsbin：使用defaultChecked而不是选中的、有效的TLDR。
尝试设置一个简单的复选框，该复选框将在选中时删除其标签文本。由于某些原因，当我使用组件时，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>
);
}
});回答 5
Stack Overflow用户
回答已采纳
发布于 2014-10-29 02:36:23
要获取复选框的选中状态，路径为：
this.refs.complete.state.checked另一种方法是从传递到handleChange方法的事件中获取它：
event.target.checkedStack Overflow用户
发布于 2018-09-26 04:21:54
如果您有一个如下所示的handleChange函数：
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value,
});
}您可以创建自定义onChange函数，以便它的行为类似于文本输入：
<input
type="checkbox"
name="check"
checked={this.state.check}
onChange={(e) => {
this.handleChange({
target: {
name: e.target.name,
value: e.target.checked,
},
});
}}
/>Stack Overflow用户
发布于 2018-02-09 14:39:55
在这个场景中，您不希望在输入DOM上使用onChange处理程序，您可以使用onClick属性作为替代。该条件可以为v16 defaultChecked留下固定状态。
class CrossOutCheckbox extends Component {
constructor(init){
super(init);
this.handleChange = this.handleChange.bind(this);
}
handleChange({target}){
if (target.checked){
target.removeAttribute('checked');
target.parentNode.style.textDecoration = "";
} else {
target.setAttribute('checked', true);
target.parentNode.style.textDecoration = "line-through";
}
}
render(){
return (
<span>
<label style={{textDecoration: this.props.complete?"line-through":""}}>
<input type="checkbox"
onClick={this.handleChange}
defaultChecked={this.props.complete}
/>
</label>
{this.props.text}
</span>
)
}
}我希望这对将来的某个人有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26615779
复制相关文章
相似问题