javascript - 复选框状态的更改无法识别 ReactJS
问题描述
我试图做一个复选框,在选中或取消选中复选框时更改文本,但是即使在触发复选框后状态似乎也没有改变。我正在尝试遵循教程并遇到此错误,由于某种原因无法找到问题所在。以下是我当前的代码。
var UseOfState = class extends React.Component {
constructor(props) {
super(props);
this.state = {isCheck: true};
this.toggleCheckbox = this.toggleCheckbox.bind(this);
}
toggleCheckbox () {
console.log('checkbox triggered');
this.setState = ({isCheck: !this.state.isCheck});
}
render () {
console.log('render');
var msg;
if(this.state.isCheck) {
msg = 'checked';
console.log(this.state.isCheck);
} else {
msg = 'unchecked';
console.log(this.state.isCheck);
}
return (
<div>
<input type="checkbox" onChange={this.toggleCheckbox} defaultChecked={this.state.isCheck}/>
<h3>Check box is {msg}</h3>
</div>
);
}
}
ReactDOM.render(<UseOfState/>,document.getElementById('root'));
这是我的代码笔: https ://codepen.io/anon/pen/OazZpa
我想知道我的错误在哪里:)
解决方案
下一行有错字
this.setState = ({isCheck: !this.state.isCheck});
到
this.setState({isCheck: !this.state.isCheck});
然后它工作正常。
推荐阅读
- javascript - 使用 dangerouslySetInnerHtml 渲染内容时如何使用 React 链接?
- javascript - Oracle JET - 我的 oj-list-view 不起作用
- c - 为什么我得到这个奇怪的输出?
- git - 在 VSTS 中禁用自动合并
- html - Html输入属性不起作用
- java - 如何在 this(...) 或 super(...) 之前“插入”代码?
- opencart - 打开购物车中的自动完成搜索
- php - 生成随机字节不适用于托管域
- c# - asp.net core 2.1中无法访问已处理的对象如何解决?
- php - 如何通过 php curl 登录这个网站?