设置默认值以反应boostrap Form.Check

Question

我有以下复选框代码：

<Form.Group  controlId="formBasicCheckbox">
       <Form.Check
             onChange={(disabled)=> {disabled ? packed = 'yes' : packed = 'no'}} >
       </Form.Check>
</Form.Group>

我还需要为其设置默认值，但找不到方法来做到这一点。我尝试了“value”、“defaultValue”，但没有任何帮助，谷歌也没有。

Answer 1

defaultValue确实有效，但请注意，这主要适用于不受控制的组件。既然你有一个，onChange我认为你想要的是value（除非是onChange为了其他目的 - 不管我下面的代码可以提供帮助）。

如果有帮助，您还可以使用defaultChecked接受布尔值的 prop，该布尔值将设置是否最初应选中复选框（您也可以使用checkedprop - 但此时您需要通过状态等方式控制其值）。

另外，我认为你onChange对道具有误解。它的回调参数是一个 SyntheticEvent - 我发现这disabled是一个奇怪的标识符并且令人困惑。请参阅下面的代码了解详情

const [packed, setPacked] = React.useState("yes");

<Form.Check
  defaultChecked={true} // if checkbox should be checked by default
  // defaultValue="yes" // use this instead of value if you want uncontrolled component
  value={packed} // state-controlled value of checkbox
  onChange={(e) => {
    // e.target.checked will return true or false if checkbox is checked
    e.target.checked ? setPacked("yes") : setPacked("no");
  }}
></Form.Check>