Вложенный флажок Material-UI не отображает изменения в родительском в DOM

Question

У меня есть пример рабочего вложенного флажка Я работаю над внедрением в мое приложение.Логика для флажков является достаточно функциональной, чтобы охватить эти 7 случаев

- Scenario - No children, no parent selected
  - Select the parent -> select the parent and all children
  - Select a child -> select that child and its parent
- Scenario - All children and the parent selected
  - Select the parent -> deselect the parent and all children
  - Select a child -> deselect only that child
- Scenario - Some children and the parent selected
  - Select the parent -> select all unselected children
  - Select a child -> select that child, parent remains selected
  - Deselect last child -> deselect the child and deselect the parent

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

Из моего кода:

<Checkbox
  disableRipple
  edge="start"
  checked={sub.checked}
  onChange={() =>
    this.handleCheckClick(sub.id, parentIndex)
  }
/>

Компонент Material-UI <Checkbox /> находится внутри списка элементов, и каждый элемент имеетпоследующий список предметов со своими <Checkbox /> компонентами соответственно.Когда я выбираю родительский флажок списка, состояние корректно изменяется с помощью этого метода handleCheckClick(), и состояние обновляется должным образом, и визуальное обновление происходит так, как вы думаете.

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

Интересно то, что если я использую собственный ввод, как это:

<input
  type="checkbox"
  disableRipple
  edge="start"
  checked={sub.checked}
  onChange={() =>
    this.handleCheckClick(sub.id, parentIndex)
  }
/>

Правильное поведение отображается как визуально, так и в состоянии (как это уже было).Я не уверен, является ли это ошибкой, характерной для Material-UI, или состоянием гонки, или что-то еще происходит, но я знаю, что логика в функции handleCheckClick() является правильной, поскольку изменения отображаются правильно в состоянии реакции.

Answer 1

На самом деле у вас есть предупреждение, указывающее, что происходит:

Предупреждение: компонент изменяет неконтролируемый ввод флажка типа для управления.Входные элементы не должны переключаться с неуправляемых на управляемые (или наоборот).Выберите между использованием контролируемого или неконтролируемого элемента ввода в течение срока службы компонента.Дополнительная информация: https://reactjs.org/docs/forms.html#controlled-components

Проблема в том, что вы не инициализируете состояние checked в createSubscriptions (см. Код ниже), поэтому изначально sub.checked равно undefined.Это заставляет Material-UI рассматривать флажок как неуправляемый , поэтому указание состояния checked позже не имеет никакого эффекта.

function createSubscriptions() {
  const statusSet = ["Processing", "Completed", "Submitted", "Error"];
  const quantity = (faker.random.number() % 10) + 1;
  const subscriptions = [];
  let x = 0;
  while (x < quantity) {
    subscriptions.push({
      id: faker.random.uuid(),
      name: faker.lorem.words(),
      description: faker.lorem.sentence(),
      created: faker.date.past(),
      status: statusSet[faker.random.number() % 4],
      checked: false, // ADDING THIS FIXES IT
      geoJson: {
        features: createGeoJson()
      }
    });
    x += 1;
  }
  return subscriptions;
}

В качестве альтернативы, вы можете справиться с этим в момент рендеринга Checkbox:

<Checkbox
  disableRipple
  edge="start"
  checked={sub.checked || false}
  onChange={() =>
    this.handleCheckClick(sub.id, parentIndex)
  }
/>