Добавить только один выбор из группы в массив

Question

Я создаю приложение для ставок на футбол, в котором я бы хотел выбрать победителя / проигравшего / ничью из матча, а затем сохранить его в списке выбранных ставок.

То, что у меня есть до сих пор

Для каждого матча вы можете выбрать победителя в команде или ничьей.Метод getSelection передается в качестве подпора обработчику onClick каждой кнопки.

Затем метод getSelection добавляет значение нажатия кнопки в массив, например:

getSelection = (val: object) => {
    this.setState(
        {bets: [...this.state.bets, val]},
        () => console.log(this.state.bets, "bets")
    );
};

Я хочу только иметь возможность сделать один выбор для каждого матча, визуально представленный так:

Codesandbox.

Answer 1

Это решение обновляет результаты матча на основе выбора пользователя.

ОДИНОЧНОЕ МАТЧА ПОЛУЧИТ ОДИН РЕЗУЛЬТАТ, т. Е. РЕЗУЛЬТАТЫ БУДУТ ПЕРЕЗАПИСАТЬ

Также для отслеживанияMatch Number, я использовал matchNumber в качестве индекса.

Ваш getSelection будет выглядеть примерно так.

getSelection = (val: object, matchNumber: number) => {
    // 1. Make a shallow copy of the items
    let bets = [...this.state.bets];
    // 2. Make a shallow copy of the item you want to mutate
    let bet = { ...bets[matchNumber] };
    // 3. Replace the property you're intested in
    bet = val;
    // 4. Put it back into our array. N.B. we *are* mutating the array here, but that's why we made a copy first
    bets[matchNumber] = bet;
    // 5. Set the state to our new copy
    this.setState({ bets }, () => console.log(this.state.bets));

Обновите фон:

<button
    style={{ background: winner == home.name ? "lightblue" : "white" }}
    onClick={() => this.props.getSelection(home, matchNumber)}
  >
    {home.name}
  </button>
  <button
    style={{ background: winner == draw.name ? "lightblue" : "white" }}
    onClick={() => this.props.getSelection(draw, matchNumber)}
  >
    {draw.name}
  </button>
  <button
    style={{ background: winner == away.name ? "lightblue" : "white" }}
    onClick={() => this.props.getSelection(away, matchNumber)}
  >
    {away.name}
  </button>

Проверьте это рабочее решение.https://codesandbox.io/s/9lpnvx188y

Answer 2

Вы говорите, что можете добавить одну возможность только один раз? Тогда это может сработать:

    getSelection = (val: object) => {
      this.setState( {
        bets: [...this.state.bets, val].filter((value, index, self) => { return self.indexOf(value) === index; })
        },
        () => console.log(this.state.bets, "bets")
      );
    };

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

аля: https://codesandbox.io/s/x2o5m95oxw