ReactJS は、インタラクティブなコンポーネントを開発する効率的な方法を提供する、ユーザー インターフェイスを構築するための人気のある JavaScript ライブラリです。トグル スイッチは、ユーザーが Web アプリケーションでダーク モードとライト モードのテーマを切り替えるためによく使用されます。トグルを使用して、ページの特定のコンテンツまたは部分を表示または非表示にすることもできます。この記事では、ReactJS を使用してトグルを作成する方法を説明します。
このチュートリアルを続ける前に、ReactJS の基本を理解しており、Node.js と npm がインストールされた開発環境をセットアップしていることを前提としています。
まず、Create React App を使用して新しい React アプリケーションを作成しましょう。コマンド プロンプトを開き、次のコマンドを実行します:
リーリーこのコマンドは、「toggle-slider-switch」という新しいディレクトリを作成し、その中に基本的な React アプリケーションをセットアップします。プロジェクト ディレクトリに移動するには、次のコマンドを記述します。
リーリープロジェクトの src ディレクトリに、ToggleSlider.js という名前の新しいファイルを作成します。このファイルには、トグル スライダー コンポーネント コードが含まれます。お気に入りのテキスト エディターで ToggleSlider.js ファイルを開き、次のコードを追加します:
###例###ステップ 3: トグル スライダーのスタイルを設定する
以下のコードでは、CSS コードは、スイッチとそのスライダー ハンドルを含むトグル スライダーのスタイルを設定します。 input[type='checkbox'] は非表示になっており、ラベルを使用してトグル効果をトリガーします。
リーリー次に、src ディレクトリ内の App.js ファイルを変更して、ToggleSlider コンポーネントを含めましょう。 App.js ファイルを開き、その内容を次のコードで更新します
###例###ステップ 5: React アプリケーションを実行する
コンパイル プロセスが完了すると、デフォルトのブラウザが開き、画面に「Toggle Slider Example」というタイトルとトグル スライダーが表示されます。
リーリー切り替えスライダーをクリックすると、状態が切り替わり、外観が変わります。 ToggleSlider コンポーネントの初期状態は「false」に設定されているため、スライダーをクリックすると青色に変わり、「true」状態を示します。もう一度クリックすると初期状態に戻ります。
###出力### リーリー ###結論は###この記事では、Reactjs でスイッチを作成する方法について説明しました。 React アプリケーションのセットアップ、トグル スライダー コンポーネントの作成、スライダーのスタイル設定、コンポーネントの実装、アプリケーションの実行という段階的なプロセスを説明しました。このガイドに従うことで、ReactJS アプリケーションに機能切り替えスライダー スイッチが追加され、さらにカスタマイズしてプロジェクトに統合できるようになります。
以上がReactJSでスイッチを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。