Question

我有3个复选框，其中一个在创建Backlog数组中的Game对象时会自动选中。

这三个复选框分别为notStarted（已自动选中），inProgress和Completed，它们全部起作用，并且在选中后可以正确更改状态。但是，我想确保始终选中一个框。

因此，如果我选中了“已完成”框，那么如果我取消选中该框，我希望notStarted框返回到选中状态。但是出于某种原因，我无法使其正常工作。

这是我的App.js中的markComplete函数，用于onChange期间Game.js文件中调用的复选框。

addGame = (title, hours) => {
   const newGame = {
     id: uuid.v4(),
     title: title,
     hours: hours,
     notStarted: true,
     inProgress: false,
     completed: false,

}

markCompleted = (id) => {
   this.setState({games: this.state.games.map(game => {
     if(game.id === id){

       game.completed = !game.completed
       //game.notStarted = false;
       game.inProgress = false;

       if(game.inProgess === false && game.completed === false){
         game.notStarted = true;
         console.log('both false'); //this is not running?
       }

       else{
         game.notStarted = false;
       }
     }
     return game;
   })})
 };

这是在我的Game.js中

<FormControlLabel
         control={
               <Checkbox
                   color="primary"
                   onChange={this.props.notStarted.bind(this, id)}
                   checked={this.props.game.notStarted} 
               />
          }
          label="Not Started"
  />

<FormControlLabel
         control={
               <Checkbox
                   color="primary"
                   onChange={this.props.markCompleted.bind(this, id)}
                   checked={this.props.game.completed} 
               />
          }
          label="Completed"
  />

TIL：如果我取消选中已完成的复选框，则希望再次选中notStarted复选框。（当选中其他复选框时，它们可以正常工作）

React Material UI：基于状态的控制复选框？

0 个答案: