rc-select 是一个基于 React 开发的 select 组件。它提供了丰富的 API 和可配置性，可以满足各种选择器场景。本文将介绍如何使用 rc-select。
安装
使用 npm 进行安装：
npm install rc-select --save
基本用法
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------ ---- ------------ ------ ----------------------------- ----- ------- - - - ------ -------- ------ ------- -- - ------ --------- ------ -------- -- - ------ --------- ------ -------- -- -- -------- ------------- - ------ ------- ----------------- --- - ------ ------- ------------展开代码
上面的代码演示了如何使用 rc-select 的最简单方式。我们创建了一个包含三个选项的下拉框。
高级用法
多选
<Select mode="multiple" options={options} />
当 mode 属性设置为 multiple 时，下拉框变成多选模式。
远程搜索
-- -------------------- ---- ------- -------- ------------------------ - ------ ------------------------------------- -------------- -- ---------------- ---------- -- ------------- -- -- ------ ---------- ------ ------- ----- - -------- -------------- - ------ ------- ------------------------- --- -展开代码
当 showSearch 属性设置为一个 Promise 函数时，下拉框将变成远程搜索模式。在用户输入时，组件会调用这个函数来获取匹配的选项。
自定义选项
-- -------------------- ---- ------- -------- -------------- - ------ - -------------- --------------- ----- -------- ------ ----- --------- ------------- ---------------- -- - -------- -------------- - ------ - ------- ------------------ ------------- -- --------- -- -展开代码
使用 Select.Option 组件可以创建自定义的选项。
API 参考
Select
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| options | Array<{ label: string, value }> | [] | 选项列表 |
| mode | 'single' | 'multiple' | 'single' | 模式 |
| showSearch | boolean | ((input: string) => Promise<Array<{ label: string, value }>>) | false | 是否启用搜索功能。如果是一个函数，表示远程搜索 |
| placeholder | string | 占位符 | |
| defaultValue | string | Array<string> | 初始值 | |
| onChange | (value: string | Array<string>) => void | 值变化时的回调函数 |
Select.Option
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| value | string | 值 | |
| disabled | boolean | false | 是否禁用 |
| children | ReactNode | 内容 |
总结
rc-select 是一个强大的选择器组件。通过本文的介绍，你可以掌握 rc-select 的基本用法和高级用法。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/44016
