ReactJSでスイッチを作成するにはどうすればよいですか?

ReactJS は、インタラクティブなコンポーネントを開発する効率的な方法を提供する、ユーザー インターフェイスを構築するための人気のある JavaScript ライブラリです。トグル スイッチは、ユーザーが Web アプリケーションでダーク モードとライト モードのテーマを切り替えるためによく使用されます。トグルを使用して、ページの特定のコンテンツまたは部分を表示または非表示にすることもできます。この記事では、ReactJS を使用してトグルを作成する方法を説明します。

前提条件

このチュートリアルを続ける前に、ReactJS の基本を理解しており、Node.js と npm がインストールされた開発環境をセットアップしていることを前提としています。

React アプリケーションをセットアップし、必要なライブラリをインストールする

まず、Create React App を使用して新しい React アプリケーションを作成しましょう。コマンド プロンプトを開き、次のコマンドを実行します:

リーリー

このコマンドは、「toggle-slider-switch」という新しいディレクトリを作成し、その中に基本的な React アプリケーションをセットアップします。プロジェクト ディレクトリに移動するには、次のコマンドを記述します。

リーリー

ステップ 2: ToggleSlider コンポーネントを作成する

プロジェクトの src ディレクトリに、ToggleSlider.js という名前の新しいファイルを作成します。このファイルには、トグル スライダー コンポーネント コードが含まれます。お気に入りのテキスト エディターで ToggleSlider.js ファイルを開き、次のコードを追加します:

＃＃＃例＃＃＃

以下のコードでは、React から useState フックをインポートしました。これにより、機能コンポーネントで状態を処理できるようになります。チェックされた変数を使用してスイッチの状態を維持する ToggleSlider コンポーネントを定義します。 handleToggle 関数は、スイッチがクリックされたときに状態を更新する役割を果たします。

リーリー

ステップ 3: トグル スライダーのスタイルを設定する

同じディレクトリ (src) に ToggleSlider.css という名前の新しいファイルを作成します。次の CSS コードを追加して、トグル スライダーのスタイルを設定します:

＃＃＃例＃＃＃

以下のコードでは、CSS コードは、スイッチとそのスライダー ハンドルを含むトグル スライダーのスタイルを設定します。 input[type='checkbox'] は非表示になっており、ラベルを使用してトグル効果をトリガーします。

リーリー

ステップ 4: ToggleSlider コンポーネントを実装する

次に、src ディレクトリ内の App.js ファイルを変更して、ToggleSlider コンポーネントを含めましょう。 App.js ファイルを開き、その内容を次のコードで更新します

＃＃＃例＃＃＃

以下のコードでは、ToggleSlider コンポーネントをインポートし、App コンポーネントでレンダリングします。これにより、画面上にトグル スライダーが表示されます。

リーリー

ステップ 5: React アプリケーションを実行する

これで、トグル スイッチ アプリケーションを実行できるようになりました。コマンド プロンプトで、プロジェクトのルート ディレクトリにいることを確認します (スライダー スイッチを切り替えます)。次のコマンドを実行して React 開発サーバーを起動します:

コンパイル プロセスが完了すると、デフォルトのブラウザが開き、画面に「Toggle Slider Example」というタイトルとトグル スライダーが表示されます。

リーリー

ステップ 6: トグル スライダーをテストする

切り替えスライダーをクリックすると、状態が切り替わり、外観が変わります。 ToggleSlider コンポーネントの初期状態は「false」に設定されているため、スライダーをクリックすると青色に変わり、「true」状態を示します。もう一度クリックすると初期状態に戻ります。

＃＃＃出力＃＃＃ リーリー ＃＃＃結論は＃＃＃

この記事では、Reactjs でスイッチを作成する方法について説明しました。 React アプリケーションのセットアップ、トグル スライダー コンポーネントの作成、スライダーのスタイル設定、コンポーネントの実装、アプリケーションの実行という段階的なプロセスを説明しました。このガイドに従うことで、ReactJS アプリケーションに機能切り替えスライダー スイッチが追加され、さらにカスタマイズしてプロジェクトに統合できるようになります。

以上がReactJSでスイッチを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。