Question

我在上面的代码和框中有一个演示。第一个复选框将所有状态更改为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范围。稍后，当您要求对状态 control 做出反应时，react不能确定什么是正确的行为，因此无法解决。

您可以通过将其他两个复选框设置为状态来明确要求对 control 做出反应来纠正它。

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

这是React官方文档中controlled和uncontrolled组件文档的链接。

更新：这是我从您的分支中分叉的沙箱：https://mm3379x0ox.codesandbox.io/

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

1 个答案: