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>
);
}
});
发布于 2014-10-29 02:36:23
要获取复选框的选中状态,路径为:
this.refs.complete.state.checked
另一种方法是从传递到handleChange
方法的事件中获取它:
event.target.checked
发布于 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,
},
});
}}
/>
发布于 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>
)
}
}
我希望这对将来的某个人有所帮助。
https://stackoverflow.com/questions/26615779
复制相似问题