Javascript 显示不正确值的反应复选框

我有一个简单的反应组件：

export default class RidiculousCheckbox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isChecked: true,
        };
    }

    handleInputChange(event) {
        window.console.log("Value of event:" + event.target.checked);
        this.setState({isChecked: event.target.checked});
        window.console.log("State after setting, is checked:" + this.state.isChecked);
    }

    render() {
        return (
            <form>
                <input
                    type="checkbox"
                    checked={this.state.isChecked}
                    onChange={this.handleInputChange.bind(this)}/>
            </form>
        );
    }
}

如果我再次单击它，复选框将返回，并且输出：

Value of event:true
State after setting:false

在第一个示例中，当

event.target.checked

的值明显为

false

时，为什么将状态设置为

true

this.setState({isChecked: event.target.checked});

借

由于您正在切换值，所以一切都应该正常工作

或更具可读性：

this.setState((previousState) => ({ isChecked: !previousState.isChecked }));

替换

this.setState({isChecked: event.target.checked});

借

由于您正在切换值，所以一切都应该正常工作

或更具可读性：

this.setState((previousState) => ({ isChecked: !previousState.isChecked }));

---

这是因为setState函数是异步的，当您检查新值“设置后的状态：true”时，它只是还没有改变

如果要查看setState之后的状态，请使用回调：

this.setState({...}, () => {
  window.console.log("State after setting, is checked:" + this.state.isChecked);
})

---

这是因为setState函数是异步的，当您检查新值“设置后的状态：true”时，它只是还没有改变

如果要查看setState之后的状态，请使用回调：

this.setState({...}, () => {
  window.console.log("State after setting, is checked:" + this.state.isChecked);
})

---

这可能有助于您在需要时在setState上使用回调这可能有助于您在需要时在setState上使用回调