材质 Ui 复选框控制的状态更改不起作用

Question

https://codesandbox.io/s/rwm5x1w9r4

我在上面的代码和框中有一个演示。第一个复选框将所有状态更改为checked=true第二个和第三个复选框只是管理自己的状态。状态更改工作正常，但复选框视觉效果没有变化。我该怎么做才能确保复选框根据状态变化进行操作？

Answer 1

如果你检查控制台，你会看到一个警告：

警告：组件正在更改要控制的复选框类型的不受控制的输入。输入元素不应从不受控制切换到受控制（反之亦然）。决定在组件的生命周期内使用受控或非受控输入元素。

您看到这个问题是因为您没有从一开始就控制其他两个复选框的状态，而是稍后尝试自己管理它。

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

幕后发生的事情是：不受控制的组件的状态由dom维护，即在 reacts 范围之外。稍后当您要求 react控制状态时，react 不确定什么是正确的行为并退出。

您可以通过将它们设置为状态来明确要求 react控制其他两个复选框来纠正它。

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

这是react 官方文档中受控和非受控组件文档的链接。

更新：这是我从你那里分叉出来的沙箱：https : //mm3379x0ox.codesandbox.io/