Флажок React Material UI: Как установить / снять флажки с других блоков в группе, установив другой флажок? - PullRequest
0 голосов
/ 30 мая 2019

У меня установлено 3 флажка (Не начато, Выполняется, Завершено), и я хотел бы разрешить проверку только одного в определенное время.

Итак, если Not Started автоматически проверяется для начала, как я могу заставить его снять галочку с «Not Started», если я проверю «Completed»?

Вот мой код на данный момент:

В 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"
/>

На данный момент я могу успешно изменить состояние реквизита, но я не уверен, как установить / снять флажок в соответствии с состоянием?

Ответы [ 2 ]

2 голосов
/ 30 мая 2019

Просто используйте переключатель вместо флажка. Это поведение радио по умолчанию.

0 голосов
/ 30 мая 2019

При использовании Prop [флажок] FormControlLabel из здесь

this.state.games.checked

Если true, компонент отображается выбранным.

...