Question

嗨，我的代码中有些时髦的内容。我的toggleChecked()应该在isChecked: true时选择所有房间，这意味着在UI中选中复选框时，请选择所有房间。

它正在运行，它会在isChecked is true时选择所有房间，但是在toggleCheck()中检查是否是this.state.isCheck === false，然后选择所有房间。此检查应为this.state.isCheck === true。当我进行此true检查时，它无法按预期工作。例如，当未选中复选框即所有房间都被选中时。但是，当检查false时，它将按预期工作。

```
   if(this.state.isChecked === false){
        const roomOrder = //this variable has all the rooms in an array;
        this.setState({selectedRooms: roomOrder}); 
    }else{
        this.setState({selectedRooms : []}); 
    }```

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 }));

        if(this.state.isChecked === false){

            const roomOrder = //this variable has all the rooms in an array;
            this.setState({selectedRooms: roomOrder}); 

        }else{
            this.setState({selectedRooms : []}); 
        }
    }


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

Answer 1

状态更改后，您将无法检查setState的更改，请尝试使用回调方法，这种方法适用于您的情况。

您可以浏览文档以获取更多详细信息。

 toggleChecked() {
        this.setState({ isChecked: !this.state.isChecked }, ()=>{
            if(this.state.isChecked === false){
            const roomOrder = //this variable has all the rooms in an array;
            this.setState({selectedRooms: roomOrder}); 
        }else{
            this.setState({selectedRooms : []}); 
        }
      });
}

Answer 2

您可以这样做

toggleChecked() {
   if(!this.state.isChecked){
     const roomOrder = //this variable has all the rooms in an array;
     this.setState({selectedRooms: roomOrder, isChecked: !this.state.isChecked}); 
   }else{
     this.setState({selectedRooms : [], isChecked: !this.state.isChecked}); 
   }
}

react中的切换状态工作正常，但我的功能中的检查不正确

2 个答案: