React Material UI 复选框：如何通过选中不同的框来选中/取消选中组中的其他框？

Question

我设置了 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() 方法中：

<Backlog games={this.state.games} 
        markCompleted={this.markCompleted} 
        inProgress={this.inProgress}
        notStarted={this.notStarted}
/>

这是 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"
/>

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

Answer 1

只需使用单选按钮而不是复选框即可。这是默认的无线电行为。

Answer 2

从这里使用 FormControlLabel 的 Prop [checked]

this.state.games.checked

如果为 true，则该组件将显示为已选中。