React-Bootstrap 组件开关无法正常工作。

Question

Bootstrap的switches似乎无法正常工作。即使是文档中的版本也无法正常工作。

Bootstrap开关无法正常工作，甚至连文档中的版本也不行。

<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>

- Mo.

---

我认为你漏掉了bootstrap的导入。你有检查过入门部分吗？ - duc mai

@ducmai 你可以看到其他组件正在工作 https://codesandbox.io/s/angry-kepler-5wqi3?fontsize=14 这意味着没有任何遗漏。 - Mo.

你是对的。只需快速查看代码生成的 HTML，似乎沙盒版本与他们文档中的不同。 - duc mai

未来的读者注意：这确实在旧版本的react-bootstrap上无法使用。但是，将其更新到较新的版本就可以使用，可以查看此处使用React 16和Bootstrap 4的forked codesandbox，或使用React 17和Bootstrap 5的this forked codesandbox。 - OfirD

Answer 1

简单的FormCheck对我很有效：

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

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

- Skipper

Answer 2

很遗憾，该交换机的文档并不是最好的。但以下内容应该能帮助你设置交换机以供使用。

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>
...

- Mix Master Mike

Answer 3

如果您添加了custom属性，它将显示开关按钮，但我仍然无法切换开关...

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

- DJ'

Answer 4

我找到了一种方法。

最初的回答。

import React from "react";
import ReactDOM from "react-dom";
import { Container, Form, FormCheck, Button } from "react-bootstrap";

import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  const [swt, setSwt] = React.useState(true);
  const [swt2, setSwt2] = React.useState(true);

  return (
    <Container className="App">
      Aprroch 1
      <FormCheck custom type="switch">
        <FormCheck.Input isInvalid checked={swt} />
        <FormCheck.Label onClick={() => setSwt(!swt)}>
          {`Value is ${swt}`}
        </FormCheck.Label>
      </FormCheck>
      Approch 2
      <Form.Check custom type="switch">
        <Form.Check.Input isInvalid checked={swt2} />
        <Form.Check.Label onClick={() => setSwt2(!swt2)}>
          {`Value is ${swt2}`}
        </Form.Check.Label>
      </Form.Check>
    </Container>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

codeSandbox

- Rahul

Answer 5

我遇到了类似的问题，按照另一个答案建议添加自定义内容后，开关显示正确，但切换不起作用。我注意到我指向了较旧版本的react-bootstrap，因此将其更改为指向当前版本（目前是v1.0.0-beta.16），这样就可以使切换起作用并删除自定义内容。因此，如果您遇到此类问题，最好确保您指向的是最新版本的react-bootstrap：React Bootstrap。

- Simon

Answer 6

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

将开关的ID从switchEnabled更改为switchEnabled1似乎有效。如果您在多个位置使用它，则必须具有不同的ID。

- Kaustubh

Answer 7

我使用了像简单的Bootstrap这样的类

<div className="form-check form-switch">
    <input className="form-check-input" type="checkbox" id="flexSwitchCheckDefault"/>
    <label className="form-check-label" for="flexSwitchCheckDefault">
           switch checkbox input
    </label>
</div> 

- Marzieh Mousavi

Answer 8

我觉得我们需要像这样使用useState

 <Form.Check
  type="switch"
  id="custom-switch"
  label="Email"
  checked={emailChecked}
  onChange = {() => setEmailChecked(!emailChecked)}
  style={{ marginLeft: '20px' }}
/>

- Binwin Viju