Web プロジェクトの処理で ReactSelect パッケージを使用するにはどうすればよいですか?

3 ～ 4 年前に Web プロジェクトに取り組んでいたとき、要素の選択は構築する最も簡単な作業の 1 つでした。しかし今日では、特に UI と UX の優先順位が高い場合には、ビルドを選択する要素が数多くあります。

たとえば、フォーカス、リモートソースからのデータの取得、選択要素のスタイル設定などの機能を考慮する必要があります。React プロジェクトに取り組んでいるとき、おそらく再利用可能なコンポーネントがマルチバースのどこかに存在することを期待するでしょう。

React 選択を始める

幸いなことに、Jed Watson は、彼の会社 Thinkmill と Atlassian からの資金提供を受けて、React Select と呼ばれるオープンソースプロジェクトを開始しました。この記事では、 Hotmail メールボックスを登録する方法について説明します。Outlook メールアカウントを作成するにはどうすればよいですか? React Select v5 に含まれる優れた機能のいくつかを紹介し、簡単な例で React Select を使い始める方法を学びます。React Select に関するビデオチュートリアルもご覧ください。はじめましょう！

前提条件

このチュートリアルを進めるには、次のものが必要です。

マシンにインストールされている Yarn または npm
React App がインストールされたコマンドラインインターフェイスツールを作成する
HTML、JavaScript ES6、CSS の基本的な理解
React フレームワークの基本的な理解
コマンドラインターミナルの基本的な理解

React Select をインストールする

これらの要件を満たしているので、まずiPhone をフラッシュしてエラー 4013 を報告します。どうすればよいでしょうか? 4013エラーの原因は何ですか? React 既存の React アプリケーションに追加するパッケージを選択します。このチュートリアルでは、Create React App CLI ツールを使用します。

既存のプロジェクトがない場合は、次のコードを使用してプロジェクトを作成できます。

npx create-react-app my-app 
# または
糸でreact-app my-appを作成

完了したら、次のコマンドを使用して React Select パッケージをインストールできます。

npm install 反応選択
# または
糸追加反応選択

次に、React アプリケーションに React Select パッケージをインポートして使用する方法を見ていきます。

React Selectの基本的な使い方

React Select の使用を開始するには、そのコンポーネントをインポートし、オプションとそれに対応するラベルを含むオブジェクトの配列を追加するだけです。

// App.js
インポート
"react-select"から選択; 
const
App = () => { 
  const options = [ 
    { value: "blues", label: "Blues" }, 
    { value: "rock", label : "ロック" }, 
    { 値: "ジャズ", ラベル: "ジャズ" }, 
    { 値: "オーケストラ", ラベル: "オーケストラ" }, 
  ]; 
return
  ( 
    <div> 
      <オプションの選択={オプション} / > 
    </div> 
  ); 
};
デフォルトのアプリ
をエクスポートします

上記のコードスニペットでは、音楽ジャンルとしてオプションを選択しており、これらのオプションは props としてコンポーネントに渡されます。アプリを実行すると、画面の端から端まで広がる要素が表示されるはずです。

次のセクションでは、コンポーネントのスタイルを設定して機能を拡張し、より視覚的に魅力的なものにする方法を説明します。ただし、最初に、コンポーネントがページの幅全体を占めることを防ぎ、構築を支援するために、アプリに Bootstrap を追加します。選択「選択」

ブートストラップの追加

次のようにプロジェクトにブートストラップをインストールできます。

npm install bootstrap 
# または、
yarn add boostrap

Bootstrap がインストールされたら、そのユーティリティクラスを利用してアプリケーションを再構築します。


  ]; 
  return ( 
    <div className="container"> 
      <div className="mt-5 m-auto w-50"> 
        <Select options={options} /> 
      </div> 
    </div> 
  ); 
};
デフォルトのアプリ
をエクスポートします

上記のコードにより、以下の画像に示すような要素が得られます。

onChange`` オートフォーカスの使用と小道具

React Select コンポーネントから値を取得することは、従来の HTML 入力を使用することに似ています。onChange``useState のように、そのイベントと React Hook を活用することでそれを行うことができます。

「反応」からインポート { useState }; 
import "react-select" から選択します。
import "bootstrap/dist/css/bootstrap.css"; 
const
App = () => { 
  const options = [ 
    { value: "ブルース", label: "ブルース" }, 
    { value: "rock", label: " Rock" }, 
    { value: "jazz", label: "Jazz" }, 
    { value: "orchestra", label: "Orchestra" }, 
  ]; 
const
  [selected, setSelected] = useState(null); 
const
  handleChange = (selectedOption) => { 
    setSelected(selectedOption); 
    console.log(`選択されたオプション:`, 選択されたオプション); 
  }; 
return
  (  
    <div className="container">
      <div className="mt-5 m-auto w-50"> 
        <オプションを選択={options} onChange={handleChange} autoFocus={true} /> 
<
        div className="mt-4"> 
          {選択済み && < >{selected.value} を選択しました</>} 
        </div> 
      </div> 
    </div> 
  ); 
};
デフォルトのアプリ
をエクスポートします

上記のコードでは、ユーザーがコンポーネントのオプションを変更するたびに、選択したオプションの値とラベルを含むオブジェクトで状態が更新されるように、イベントに関数を追加しました。ハンドル変更onChange選択

したがって、オプションとして選択すると、コンソールには次のような内容が表示されます。

選択されたオプション: {値:"ロック"、ラベル: "ロック"}

これは、React Select コンポーネントから取得したデータを操作する場合に便利です。値を受け取り、ページの読み込み時にコンポーネントに追加するために使用される prop もあります。使用できる props の詳細については、React Select の props ドキュメントを参照してください。autoFocus booleanautoFocus`select

React Select コンポーネントにカスタムスタイルを追加する

React Select は完全にカスタマイズ可能で、、、、その他多くのコンポーネントなどの各ユニットのスタイルを設定できます。これを行うには、各セルの新しい優先スタイルを含む追加の prop を渡します:optionsプレースホルダーselectスタイルを制御します。

その過程で、各セルにデフォルトのスタイルにアクセスして追加するオプションも利用できるようになります。必要に応じてスタイルを追加することもできます。つまり、オプションが選択されているときやフォーカスされているときにどのようなスタイルを持つかを指定します。

すべて試してみるには、次のコードをファイルに貼り付けます: App.js

import "react-select" から選択します。
import "bootstrap/dist/css/bootstrap.css"; 
const
App = () => { 
  const options = [ 
    { value: "ブルース", label: "ブルース" }, 
    { value: "rock", label: "ロック" }, 
    { 値: "ジャズ"、ラベル: "ジャズ" }、
    { 値: "オーケストラ"、ラベル: "オーケストラ" }, 
  ]; 
  const customStyles = {
    オプション: (defaultStyles, state) => ({ 
      ...defaultStyles, 
      color: state.isSelected ? "#212529" : "#fff", 
      backgroundColor: state.isSelected ? "#a0a0a0" : "#212529 ", 
    }),
      パディング: "10px"、
      ボーダー: "なし"、
      boxShadow: "なし"、
    })、
    singleValue: (defaultStyles) => ({ ...defaultStyles, color: "#fff" }), 
  }; 
return
  ( 
    < div className="container"> 
      <div className="mt-5 m-auto w-50 text-light"> 
        <選択オプション={オプション} スタイル={カスタムスタイル} /> 
      </div> 
    </div> 
  ); 
};
デフォルトのアプリ
をエクスポートします

上記のコードでは、カスタムスタイルを選択、そのオプション経由、および現在選択されているオプションに追加するようにコンポーネントを変更し、コンポーネントにダークモードの外観を与える変更を加えました。アプリケーションを実行すると、次のような出力が表示されるはずです。 select controloption singleValueselect

カスタムコンポーネント

「スタイルと状態」では、2 つのカスタムコンポーネントと、スタイルを拡張するための 1 つについて説明しました。このセクションでは、.option controlselect ``Custom SingleValue''という別のメソッドを紹介します。

このカスタムコンポーネントは通常のコンポーネントと同じことを行いますが、いくつかのトリックを追加します。App.js私たちのファイルでは、次のコードを使用して React および React Selectからとパッケージをインポートします。

import Select, { コンポーネント } from 'react-select'; 
。。。

完了すると、次のような完成したドロップダウンが表示されます。

以下のコードブロックでは、React Select パッケージの基本コンポーネントを拡張するメソッドとしてカスタムコンポーネントを定義します。私たちのクラスには、上の画像に示されている機能に貢献するいくつかの props と関数があります。

「反応」からインポート { useState }; 
インポート "bootstrap/dist/css/bootstrap.css"; 
import Select, { コンポーネント } from "react-select"; 
const
Control = ({ Children, ...props }) => ( 
  <components.Control {...props}>
    クリックして選択 → {children} 
  </コンポーネント.Control> 
); 
const
App = () => { 
  const options = [ 
    { 値: "青", ラベル: "青" }, 
    { 値: "緑", ラベル: "緑" }, 
    { 値: "オレンジ", ラベル: "オレンジ" }, 
    { 値: "紫", ラベル: "紫" },
      パディング: "5px 10px"、
      borderRadius: 5、
      背景: 選択済み、
      色: "白"、
      表示: "flex"、
      幅: "fit-content"、
    })、
  }; 
const
  [selected, setSelected] = useState( ""); 
  var handleChange = (選択済み) => { 
    setSelected(選択済み. 価値）; 
  }; 
return
  ( 
    <div className="container"> 
      <div className="mt-5 m-auto w-50"> 
        <Select 
          onChange={handleChange}
          スタイル={カスタムスタイル}
          コンポーネント={ 
  
  { コントロール }}
          オプション= {オプション} 
        /> 
      </div> 
    </div> 
  );
}; 
デフォルトのアプリをエクスポートします。

複数の選択肢

単一コンポーネントで複数の選択を許可するように React Select を構成できます。これは、コンポーネントに属性 select isMultiselectを含めることによって実現されます。

「反応」からインポート { useState }; 
インポート "bootstrap/dist/css/bootstrap.css"; 
import "react-select" から選択; 
function
App() { 
  const options = [ 
    { value: "blue", label: "Blue" }, 
    { value: "green", label: "Green" }, 
    { value: "オレンジ", ラベル: "オレンジ" }, 
    { 値: "紫", ラベル: "紫" }, 
  ]; 
const
  [selectedOption, setSelectedOption] = useState(""); 
var
  handleChange = (selectedOption) => { 
    console.log(selectedOption); 
    setSelectedOption(selectedOption. 価値）; 
  }; 
return
  (  
    <div className="container">
      <div className="mt-5 m-auto w-50">
        <Select isMulti onChange={handleChange} options={options} /> 
      </div> 
    </div> 
  ); 
デフォルトのアプリをエクスポートします
。

コードを実行すると、次の出力が得られます。

SSR での React Select の使用

Next.js などのサーバーサイドレンダリング (SSR) フレームワークで React Select コンポーネントを使用しようとすると、次のような参照エラーが表示される場合があります。

参照エラー: ウィンドウが定義されていません

ブラウザのウィンドウオブジェクトは、コンポーネントが完全にマウントされるまで SSR で使用できません。ただし、React Select はブラウザオブジェクトに依存して機能します。このエラーは、コンポーネントをマウントする前に React Select ライブラリをインポートするために発生します。window`` 参照が定義されていません

次のような無効なオプションを指定して動的インポート機能を使用すると、Next.js でこのエラーを修正できます: ssr


'next/dynamic' const Select = 動的(() => import("react-select"), { 
  ssr: false, 
})から動的をインポートします。

また、react-no-ssr パッケージなどの一般的なパッケージを使用して、他のフレームワークに実装することもできます。

非同期および固定オプション

React Select コンポーネントを操作するときに重要な概念が他にもいくつかあります。その 1 つは非同期コンポーネントです。このコンポーネントは、API またはデータベースクエリから値やオプションをリクエストするときに便利です。非同期コンポーネントには、次のような便利なプロパティの提供が含まれます。

cacheOptions: キャッシュ取得のオプション
defaultOptions: リモートオプションをロードする前にデフォルトオプションを設定します。

便利なもう 1 つのコンポーネントは、固定オプションを持つことができる固定オプションコンポーネントです。

結論は

この記事では、React Select コンポーネントの一般的な使用例をいくつか検討しました。また、React Select を使い始めて、その事前定義されたコンポーネントの一部をニーズに合わせて拡張する方法も学びました。

React Select パッケージには大量の機能が組み込まれており、その中にはニーズに合うものもあれば、ユースケースに合わせてカスタマイズする必要があるものもあります。