Home-theater-designers
選択入力は、多くのスペースを占有せずに多くのオプションから値を選択できる便利な Web アプリ コンポーネントです。ただし、デフォルトのスタイルは単調で、デザインの他の部分と衝突する可能性があります。
今日のMUOビデオ スクロールしてコンテンツを続けてください
React Select は、ドロップダウン入力の外観と機能を強化する、柔軟でカスタマイズ可能なソリューションを提供します。
React Select のインストール
React と他のライブラリまたはテクノロジーとの統合 React Select、React Redux など、開発プロセスを簡素化できます。
Windows10のごみ箱アイコンがありません
React Select を使い始めるには、それをプロジェクトにインストールする必要があります。に npmを使用してこれを行う 、プロジェクト ディレクトリで次のターミナル コマンドを実行します。
npm i --save react-select
これにより、React プロジェクトにライブラリがインストールおよび設定され、使用を開始できるようになります。
React Select を使用した選択入力の作成
ライブラリを設定したので、それを使用して選択入力を作成できます。これを行うには、 選択する 成分。これは高度にカスタマイズ可能なコンポーネントであり、ユーザーはリストからオプションを選択できます。
以下は、Select コンポーネントの使用方法の例です。
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
return (
<div>
<Select options={options} />
</div>
)
}
export default App
この例は、 選択する 「」のコンポーネント 反応選択 ”。それは、 オプション 3 つのオブジェクトを含む配列。それぞれのオブジェクトは 価値 そして ラベル 財産。 value プロパティは、フォームの送信時にバックエンドに送信される値を表します。 label プロパティは、Select コンポーネントがドロップダウンに表示するテキストです。
Select コンポーネントをレンダリングするときは、 オプション 小道具。
このコード ブロックを使用すると、React Select ライブラリは次のようなドロップダウンを生成します。
選択入力のカスタマイズ
React Select は、選択入力をカスタマイズするさまざまな方法を提供します。好みに応じて、CSS クラスを使用したり、選択した入力にインライン スタイルを直接適用したりできます。
CSS クラスを使用したカスタマイズ
React Select ライブラリは、 クラス名 のための小道具 選択する 成分。この className プロパティを使用します カスタム カスケード スタイル シート (CSS) を適用するには スタイルを選択コンポーネントに追加します。
例えば：
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
return (
<div>
<Select options={options} className='select'/>
</div>
)
}
export default App
上記のコード ブロックは前のコード ブロックと似ていますが、 クラス名 カスタム CSS クラスを適用するための prop 選択する 成分。 className プロパティに名前を指定すると、それを使用して CSS スタイルをコンポーネントに適用できます。
.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}
スタイルを定義すると、選択入力は次のようになります。
インラインスタイルを使用したカスタマイズ
経由で渡すオブジェクトでインライン スタイルを定義することもできます。 スタイル の小道具 選択する 成分。これにより、個々の要素のスタイルをより詳細に制御できるようになります。
以下に例を示します。
Windows 10Wi-Fiアダプターが機能しない
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
const customStyles = {
control: (baseStyles, state) => ({
...baseStyles,
backgroundColor: "#e2e2e2",
}),
option: (baseStyles, state) => ({
...baseStyles,
backgroundColor: state.isFocused ? "#e2e2e2" : "",
color: state.isFocused ? "#333333" : "#FFFFFF",
}),
menu: (baseStyles, state) => ({
...baseStyles,
backgroundColor: "#333333",
}),
}
return (
<div>
<Select options={options} styles={customStyles} />
</div>
)
}
export default App
プロップオブジェクト、 カスタムスタイル 、選択コンポーネントのスタイル プロパティが含まれています。 コントロール 、 オプション 、 そして メニュー 部品。これらのプロパティは、2 つの引数を取る関数です。 ベーススタイル そして 州 。
BaseStyles パラメータは React Select によって提供されるデフォルトのスタイルを表し、state パラメータは要素の現在の状態を表します。この例では、関数はスプレッド演算子を使用して、baseStyles をコンポーネントの各部分の追加のスタイルと結合します。
これらのスタイルを適用すると、選択入力は次のようになります。
選択入力に機能を追加する
React Select は、選択入力の機能を強化するいくつかの機能を提供します。複数選択および検索機能を有効にしたり、カスタム ドロップダウン コンポーネントを作成したりすることもできます。
複数選択機能
ドロップダウンで複数選択機能を有効にするには、 はマルチ Selectコンポーネントにpropします。これにより、ユーザーはドロップダウン メニューから複数のオプションを選択できるようになります。
例えば：
798709C62D17AC837F231BF7CE9DAA73BC397手数料この例では、 はマルチ prop を使用して、選択入力に複数選択機能を追加します。
検索機能
React Select ライブラリには、オプションを簡単にフィルタリングするための検索機能が組み込まれています。デフォルトでは、ドロップダウンを開くと、選択コンポーネントに検索入力が表示されます。ユーザーは検索入力を入力して、利用可能なオプションをフィルタリングできます。
検索機能を有効にするには、 検索可能です にプロップします 選択する 成分。以下のような はマルチ prop、isSearchable はブール値を受け入れます。
メッセンジャーのチェックマークはどういう意味ですか
isSearchable プロパティを使用して検索機能を有効にする方法の例を次に示します。
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "apricot", label: "Apricot" },
{ value: "mango", label: "Mango" },
{ value: "mangosteens", label: "Mangosteens" },
{ value: "avocado", label: "Avocado" },
]
return (
<div>
<Select options={options} isSearchable />
</div>
)
}
export default App
上記のコード ブロックをレンダリングすると、検索機能を備えた選択入力が表示されます。見た目と機能は次のようになります。
カスタムドロップダウンコンポーネントの作成
React Select を使用すると、コンポーネント プロパティを使用してカスタム ドロップダウン コンポーネントを作成できます。 React Select によって提供されるデフォルトのコンポーネントをオーバーライドし、好みに合わせてドロップダウンの外観と動作をカスタマイズできます。
例えば：
import React from "react"
import Select, { components } from "react-select"
function App() {
const CustomOption = (obj) => (
<div {...obj.innerProps}>
<span>{obj.label}</span>
<span style={{ marginInlineStart: "0.2rem" }}>Fruit</span>
</div>
)
const CustomDropdownIndicator = (props) => (
<components.DropdownIndicator {...props}>
<span>↓</span>
</components.DropdownIndicator>
)
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
const customComponents = {
Option: CustomOption,
DropdownIndicator: CustomDropdownIndicator,
}
return <Select options={options} components={customComponents} />
}
export default App
このコード ブロックは、 コンポーネント の小道具 選択する 成分。輸入するのは、 コンポーネント オブジェクトは、選択入力内のさまざまな要素の外観と動作をカスタマイズするために使用できる、事前定義されたコンポーネントのコレクションです。
このコードは、次の 2 つの機能コンポーネントを定義します。 カスタムオプション そして カスタムドロップダウンインジケーター 。 CustomOption コンポーネントはオブジェクトをパラメータとして受け取ります。このオブジェクトには、React Select が提供するさまざまなプロパティが含まれています。 インナープロップ そして ラベル 。
CustomDropdownIndicator コンポーネントは 小道具 パラメータとして。このコンポーネントは、下向き矢印記号を備えたカスタム ドロップダウン インジケーターをレンダリングします。コードによって作成されるのは、 カスタムコンポーネント CustomOption コンポーネントと CustomDropdownIndicator コンポーネントを対応するコンポーネントにマップするオブジェクト オプション そして ドロップダウンインジケーター キー。
最後に、このコードは、customComponents オブジェクトを Select コンポーネントのコンポーネント プロパティに渡します。これにより、カスタム コンポーネントを含む選択入力が次のようにレンダリングされます。
標準コンポーネントはより強力で魅力的になる可能性があります
React Select は、React で美しくスタイリッシュな選択入力を作成できる強力なライブラリです。選択入力をカスタマイズし、機能を追加し、カスタム ドロップダウン コンポーネントを作成できます。このライブラリを利用すると、React アプリの外観とユーザー エクスペリエンスを向上させることができます。