Реагируйте: Обработка onChange в отображении рендеринга

Question

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

Таблица - это матрица, в которой член может видеть свое текущее членство и можетвыбрать из других типов членства в зависимости от возраста ... старшие, юниоры, младенцы.

https://codesandbox.io/s/64j65yrxpw

Демонстрация выше даст больше ясности.Проблема заключается в том, что, когда я выбираю вариант «да», «нет» или «возможно», выбираются все параметры для всех людей, а не только для этого человека в этой строке и для всех типов членства (выберите вариант, и вы увидите проблему).

Ниже приводится то, что питает таблицу:

const selected = [
  { personId: "0001657", fullName: "Joe Bloggs", seniorStatus: "Yes" },
  { personId: "0001666", fullName: "John Doe", seniorStatus: "No" }
];

и в идеале нужно, чтобы что-то подобное возвращалось в зависимости от выбора:

 const newlySelected = [
   { personId: "0001657", fullName: "Joe Bloggs", seniorStatus: "Yes", juniors: "maybe" },
   { personId: "0001666", fullName: "John Doe", seniorStatus: "No", juniors: "no", infants: "yes" },
 ];

Я понимаю, что есть две проблемыздесь ... переключение не ведет себя индивидуально и возвращение желаемого JSON - любая помощь будет потрясающей.спасибо

Answer 1

У вас есть «слишком просто» state.

state = {
  alignment: "left",
  formats: ["bold"]
};

Ваш state.alignment используется всеми кнопками.Если вы хотите сохранить его в виде отдельного компонента, вам нужно сделать его двумерным массивом:

[
  ['<#1 btn value>', '<#2 btn value', ...],
  [..., ..., ...]
]

Затем, когда вы вызываете setState, вам нужно изменить соответствующий элемент в двумерном массиве на основеместо действия.Вы должны индексировать, одну строку, одну ячейку, вы можете использовать их.

ОБНОВЛЕНИЕ Новое состояние - 2D массив

value: [
  ["no", "no", "no"],
  ["no", "no", "no"]
]

Новый ToggleButtonGroup -использование rowIdx и cellIdx для получения правильной позиции в 2D-массиве

<ToggleButtonGroup
  className={classes.toggleButtonGroup}
  value={value[rowIdx][cellIdx]}
  exclusive
  onChange={(event, val) => this.handleValue(event, val, rowIdx, cellIdx)}
>

New handleValue - использование rowIdx, cellIdx для изменения значения в правильной позиции.

handleValue = (event, val, rowIdx, cellIdx) => {
  const newValue = [...this.state.value]
  newValue[rowIdx][cellIdx] = val
  this.setState({
    value: newValue,
  })
}