react-bootstrap组件开关不起作用

Question

引导程序switches似乎不起作用。甚至文档版本也不起作用

<Form>
  <Form.Check 
    type="switch"
    id="custom-switch"
    label="Check this switch"
  />
  <Form.Check 
    disabled
    type="switch"
    label="disabled switch"
    id="disabled-custom-switch"
  />
</Form>

Answer 1

简单的FormCheck对我有用：

<FormCheck 
  id="switchEnabled"
  type="switch"
  checked={this.state.settings.enabled}
  onChange={this.toggleEnabled}
  label="Enable"
/>

关键是要提供ID。另一个重要的事情（加载初始值）是使用 checked 属性。

Answer 2

如果您添加<Form> <Form.Check custom type="switch" id="custom-switch" label="Check this switch" /> </Form> 属性，它将显示切换按钮，但我仍然无法切换该按钮...

{{1}}

Answer 3

我找到了一种方法。

some_type1

codeSandbox

Answer 4

我遇到了类似的问题，并按照另一个答案中的建议添加了自定义，这表明该开关正确无误，但类似地，该开关现在也可以工作了。

我注意到我指的是较旧版本的react-bootstrap，因此将其更改为指向当前版本，当时为v1.0.0-beta.16，这允许切换工作并且删除了自定义

因此，如果遇到以下问题，最好确保您指向的是最新版本的react-bootstrap：React Bootstrap

Answer 5

不幸的是，有关该开关的文档并不是最好的。尽管如此，以下内容应有助于设置开关供您使用。

const [isSwitchOn, setIsSwitchOn] = useState(false);

const onSwitchAction = () => {
  setIsSwitchOn(!isSwitchOn);
};

...
<Form>
  <Form.Switch
    onChange={onSwitchAction}
    id="custom-switch"
    label="anything you want to put here"
    checked={isSwitchOn}
    disabled // apply if you want the switch disabled
  />
</Form>
...