@phamthaibaoduy/react-select 是一个 React 的选择器组件，支持多选、远程数据和自定义选项等功能。
安装
通过 npm 安装：
npm install @phamthaibaoduy/react-select
使用
基本用法
-- -------------------- ---- ------- ------ ------ ---- ------------------------------- ----- ------- - - - ------ -------- ------ ------- -- - ------ --------- ------ -------- -- - ------ --------- ------ -------- - -- -------- ----- - ------ ------- ----------------- --- -
设置默认值
function App() {
const defaultValue = { value: 'apple', label: 'Apple' };
return <Select options={options} defaultValue={defaultValue} />;
}支持多选
function App() {
return <Select options={options} isMulti />;
}远程数据
-- -------------------- ---- -------
-------- ----------------------- --------- -
------------------------------------
-------------- -- ----------------
---------- -- -
----- ------- - ------------- -- --
------ --------
------ ---------
----
------------------
---
-
-------- ----- -
------ ------- ------------------------- ---
-自定义选项
function App() {
const customOptions = [
{ value: 'custom', label: '自定义', isDisabled: true },
...options
];
return <Select options={customOptions} />;
}API
Select props
- options:
Array<{ value: any, label: string }> - defaultValue:
{ value: any, label: string } - value:
{ value: any, label: string }或Array<{ value: any, label: string }> - onChange:
(value: any) => void - isMulti:
boolean
AsyncSelect props
- loadOptions:
(inputValue: string, callback: (options: Array<{ value: any, label: string }>) => void) => void
Option props
- value:
any - label:
string - isDisabled:
boolean
结语
@phamthaibaoduy/react-select 是一个功能丰富的 React 选择器组件，支持多选、远程数据和自定义选项等功能。希望这篇使用教程能够帮助你学习和使用该组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eab81e8991b448dc1d5