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

はじめに

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

Skills Graph

トグル

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でさらに多くの実験を練習できます。