Question

我觉得自己做得正确，但是状态没有被切换。选中此复选框后，我的状态不会更改为true。

export default class Room extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
           isChecked: false
        };

        this.toggleChecked = this.toggleChecked.bind(this);
    }

 toggleChecked() {
        this.setState({ isChecked: !this.state.isChecked });
    }

 selectAllRooms(){
        if(this.state.isChecked === true){
           //do smth; 
        }else{
           //do smth;
    }

render() {
    return (
       <Modal.Footer>
            <Checkbox onChange={this.toggleChecked}> Select All Rooms </Checkbox>
       <Modal.Footer> 
  )
 }
)

Answer 1

在反应状态下，更新可能是异步的，如果您希望访问以前的值，则应按以下方式进行操作：

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

将函数传递给setState方法时，第一个参数引用先前的状态，第二个参数引用先前的属性。

文档：https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

Answer 2

这是我第一次出现堆栈溢出，在我的一个项目中有一个复选框，这就是我的处理方式：

state = { 
    active: false
}

handleCheckboxInput = e => {
    const value = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    this.setState({ [e.target.name]: value });
};

<input
    type="checkbox"
    checked={this.state.active}
    name="active"
    onChange={this.handleCheckboxInput}
/>

我希望这会有所帮助！

如果要查看其行为，请参见以下基本代码框： https://codesandbox.io/s/magical-leftpad-o6xbj?fontsize=14

在反应中切换布尔状态

2 个答案: