React v.18 和 React-Bootstrap v.5.0 - 具有动态选中未选中属性的切换开关

Question

库：React v.18.0

CSS：React-bootstrap v.5.0 框架

组件：拨动开关

官方切换开关文档：https://react-bootstrap.github.io/docs/forms/checks-radios/#switches

需求：使用

<Form.Check

或

let

钩子在

useState

中拥有一个具有动态选中和未选中属性的开关。

尝试 1：在

if...else

语句中使用

return

表达式来切换

checked

和

unchecked

属性。

尝试 2：将

<Form.Check

带到不同的函数，并使用 2 个单独的

<Form.check

执行 if else，一个具有

checked

属性，另一个具有

unchecked

属性。

编码器视图：https://stackblitz.com/edit/react-ug9ffy?file=src%2FApp.js

用户视图：https://react-ug9ffy.stackblitz.io

Answer 1

您可以在

checked

属性中使用布尔值：

export default function App() {
  const [check, setCheck] = useState(false)

  function verifyCheck() {
    if(check) {
      setCheck(false)
    } else {
      setCheck(true)
    }
  }

  return (
    <Form>
      <Form.Check // prettier-ignore
        checked={check}
        type="switch"
        id="custom-switch"
        label="Bill gates"
        onClick={verifyCheck}
      />
      <Form.Check // prettier-ignore
        checked
        disabled
        type="switch"
        label="Steve Jobs"
        id="disabled-custom-switch"
      />
    </Form>
  );
}