Question

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

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:false
State after setting:true

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

Value of event:true
State after setting:false

为什么在第一个示例中，当true的值明显为event.target.checked时，状态设置为false？

Answer 1

这是因为setState函数是异步的，当你检查新值“设置后的状态：true”时 - 它刚好没有改变。

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

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

Answer 2

替换

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

通过

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

一切都应该正常，因为你正在切换价值。

或更具可读性：

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

React复选框显示不正确的值

2 个答案: