材质 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维护，即在反应范围之外。后来当你要求反应控制状态时，反应不确定什么是正确的行为并救助。

您可以通过显式要求 react控制其他两个复选框来更正它，方法是将它们设置为状态。

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

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

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