如何使用 React 控制输入复选框“选中”状态？

Question

我正在开发一个具有表单和单选按钮的应用程序。

对于其中一个单选按钮，它有一个可以通过复选框打开/关闭的选项。

如果未选择相应的单选按钮，我希望禁用该复选框，其默认行为在其处于活动状态时起作用，并且如果选择了不同的单选按钮，则将其禁用并取消选中。

我已经让所有这些行为都起作用了，但是 React 抛出了一个异常，

app-index.js:31 警告：组件正在将不受控制的输入更改为受控制。这可能是由于值从未定义的值更改为已定义的值引起的，这种情况不应该发生。在组件的生命周期内决定使用受控或非受控输入元件。

我的“工作”解决方案：

 const [checkboxActive, setCheckboxActive] = useState<boolean | undefined>(false);

 const handleOptionClick = (option?: string) => {
    setSelected(true);
    if (option) {
      setEveryOtherLetterSelected(true);
      setCheckboxActive(undefined);
    } else {
      setEveryOtherLetterSelected(false);
      setCheckboxActive(false);
    }
  }

<input type="checkbox" name="first" disabled={everyOtherLetterSelected ? false : true} checked={checkboxActive} />

从这个线程（在React中设置复选框“check”属性），我发现这对于React和复选框类型输入来说是一件奇怪的事情，其中它的“checked”值要么是布尔值要么是未定义的。我试过把“！！”在条件前面 (

!!checkboxActive

)，但这会改变行为。

是否有更容易接受的方法来做到这一点，React 不会对我大喊大叫？

编辑：

我已经尝试过了！！运算符在不同的地方，就像我在任何地方都有一个“未定义”值。我还搞乱了复选框没有未定义的值以及所有未定义的值，但无济于事。

Answer 1

也许试试这个：

checked={checkboxActive === undefined ? false : checkboxActive}