再利用可能な React のトグルコンポーネント

はじめに

この実験では、React を使ってトグルコンポーネントを実装する方法を探ります。トグルコンポーネントは、2 つの状態間で切り替えるために使用される一般的な UI 要素です。コンポーネントの状態を管理し、その状態に基づいて異なる CSS クラスを適用するために、useState()フックを使用します。この実験が終わるとき、React で再利用可能な UI コンポーネントを作成する方法をより深く理解しているでしょう。

トグル

VM 内には既にindex.htmlとscript.jsが用意されています。一般的には、script.jsとstyle.cssにのみコードを追加すればよいです。

トグルコンポーネントをレンダリングするには、次の手順に従います。

1. useState()フックを使用して、isToggledOn状態変数をdefaultToggledに初期化します。
2. <input>要素をレンダリングし、そのonClickイベントをバインドしてisToggledOn状態変数を更新します。ラッピングする<label>要素に適切なclassNameを適用します。
3. 次の CSS を使用してトグルコンポーネントをスタイリッシュにします。

.toggle input[type="checkbox"] {
  display: none;
}

.toggle.on {
  background-color: green;
}

.toggle.off {
  background-color: red;
}

以下がコードです。

const Toggle = ({ defaultToggled = false }) => {
  const [isToggleOn, setIsToggleOn] = React.useState(defaultToggled);

  return (
    <label className={isToggleOn ? "toggle on" : "toggle off"}>
      <input
        type="checkbox"
        checked={isToggleOn}
        onChange={() => setIsToggleOn(!isToggleOn)}
      />
      {isToggleOn ? "ON" : "OFF"}
    </label>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<Toggle />);

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！あなたはトグル実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習できます。