首页 > 解决方案 > 复选框状态的更改无法识别 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

我想知道我的错误在哪里:)

标签: javascriptreactjsreact-native

解决方案


下一行有错字

this.setState = ({isCheck: !this.state.isCheck});

this.setState({isCheck: !this.state.isCheck});

然后它工作正常。


推荐阅读