Javascript 反应物料界面复选框：如何通过选中其他复选框来选中/取消选中组中的其他复选框？

我设置了3个复选框（未开始、进行中、完成），我希望在特定时间只允许选中一个复选框

所以，如果一开始就自动选中“未启动”，那么如果选中“已完成”，我将如何使其取消选中“未启动”

以下是我目前的代码：

在App.js中：

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

  }

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

        game.notStarted = !game.notStarted
        game.inProgress = false;
        game.completed = false;
      }
    return game;
  })})
};

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

    game.completed = !game.completed
    game.notStarted = false;
    game.inProgress = false;
  }
  return game;
})})
};

在render（）方法中：

这是Game.js中的复选框

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

---

到目前为止，我可以成功地更改道具的状态，但我不确定如何根据状态使复选框选中/取消选中？

使用来自的FormControlLabel的道具[checked]

如果为true，则该组件显示为选中状态。

只需使用代替复选框即可。这是默认的无线电行为

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

this.state.games.checked