web-dev-qa-db-ja.com

react-bootstrapコンポーネントスイッチが機能しない

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

Edit angry-kepler-5wqi3

javascriptreactjstwitter-bootstrapbootstrap-4react-bootstrap
3
Mo.

同様の問題があり、別の回答で提案されているようにカスタムを追加すると、スイッチは正しく表示されましたが、同様にトグルが機能するようになりました。

以前のバージョンのreact-bootstrapを指していたことに気付いたので、現在のバージョンがv1.0.0-beta.16を指すようにこれを変更しました。これにより、トグルが機能し、カスタムを削除できました。

したがって、次のような問題が発生している場合は、最新バージョンのreact-bootstrapをポイントしていることを確認することをお勧めします。 React Bootstrap

0
Simon

私はアプローチを見つけました。

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

0
Rahul

Simple FormCheckが私のために働いています：

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

キーポイントは、IDを提供することでした。 （初期値をロードするための）もう1つの重要なことは、checkedプロパティを使用することでした。

0
Skipper

残念ながら、スイッチのドキュメントは最高のものではありません。それにもかかわらず、以下はあなたの使用のためにスイッチを設定するのに役立ちます。

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>
...
0
Mix Master Mike