Material Ui-флажок контролируемое изменение состояния не работает - PullRequest
Новая
       13

Material Ui-флажок контролируемое изменение состояния не работает

0 голосов
/ 01 апреля 2019

https://codesandbox.io/s/rwm5x1w9r4

У меня есть демо в приведенных выше кодах и окне.Первый флажок изменяет все состояния на checked=true, второй и третий флажки просто управляют своими собственными состояниями.Изменения состояния работают нормально, но визуальные элементы флажка не меняются.Что мне нужно сделать, чтобы убедиться, что флажки ведут себя в соответствии с изменением состояния?

1 Ответ

2 голосов
/ 01 апреля 2019

Если вы проверите консоль, вы увидите предупреждение:

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

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

// but you are not initializing the checkbox ids "1" & "2", so they are uncontrolled.
state = {
  "checkboxA" : true,
  "checkboxB" : true,
  "checkboxC" : true
}

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

Вы можете исправить это, явно попросив отреагировать на control двумя другими флажками, установив их в состояние. 

state = {
  "checkboxA" : true,
  "1" : true,
  "2" : true
}

Вот ссылка на документацию для контролируемые и неконтролируемые компоненты в официальных документах.

Обновление: вот песочница, которую я раздвоил у вас: https://mm3379x0ox.codesandbox.io/

...