前言
在前端开发中，我们经常需要实现表单元素的选择功能，而 select 元素虽然实现简单，但功能单一、样式丑陋，使用起来不太方便。而 npm 包 react-custom-selectize 不仅可以定制化 select 样式，还提供了选项过滤、键盘操作等高级功能，非常适合用于表单选择功能的实现。
安装
在你的 React 项目中安装 react-custom-selectize：
npm install --save react-custom-selectize
基本用法
首先在你的组件中引入 react-custom-selectize：
import React from 'react'; import Select from 'react-custom-selectize';
然后在 render 方法中使用 Select 组件：
-- -------------------- ---- -------
----- ------- - -
- ------ --------- ------ -------- --
- ------ -------- ------ ------- --
- ------ --------- ------ -------- --
- ------ ------- ------ ------ --
--
-------- ---------- -
------ -
------- ----------------- --
--
-以上代码会显示一个基本的下拉菜单，其中 options 数组中每个元素都有 label 属性和 value 属性，分别表示选项的显示文本和值。
定制化样式
react-custom-selectize 的样式可以完全自定义，它提供了一系列的 CSS 类名以供开发者调整样式。
控件本身的样式
控件本身默认使用了两个类名 css-1ytrxtl 和 css-1l03ozc，你可以使用自己的类名并覆盖这些样式。例如：
-- -------------------- ---- ------- -------------------- - --------- --------- - -------------------- ------------------ - ------- --- ----- ----- - -------------------- ---------------- - -------- ---- ---------- ----- - -------------------- ---------------- - --------- --------- ------ ----- ---- ---- ---------- ----------------- -
然后在 Select 组件中使用 className 属性指定类名：
-- -------------------- ---- -------
-------- ---------- -
------ -
-------
-----------------
-------------------------------
---------------------------
--
--
-className指定外层容器的类名。classNamePrefix指定控件内部元素公共的类名前缀。
选项的样式
选项的默认类名是 react-selectize-option，你可以使用自己的类名并覆盖相应样式。例如：
-- -------------------- ---- ------- -------------------- ----------------- - -------- ---- - -------------------- ----------------------- - ----------------- ----- - -------------------- ------------------------------ - ----------------- ----- -
常用参数
options
必填：一个包含 label 属性和 value 属性的对象数组。
const options = [
{ label: 'Orange', value: 'orange' },
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Pear', value: 'pear' },
];
<Select options={options} />value
可选：当前选中的选项值。传入一个字符串或者字符串数组。
<Select options={options} value="apple" />multi
可选：是否支持多选。默认为 false。
<Select options={options} multi />onValueChange
可选：选项值变更时的回调函数。参数是当前选中的选项值或选项值数组。
function handleValueChange(value) {
console.log('当前选中的值为：', value);
}
<Select options={options} onValueChange={handleValueChange} />进阶用法
过滤
react-custom-selectize 有内置的过滤功能，只需要给组件传入一个 filter prop 即可：
function filterOptions(options, searchText) {
return options.filter(option =>
option.label.toLowerCase().includes(searchText.toLowerCase())
);
}
<Select options={options} filter={filterOptions} />上述代码中，filterOptions 函数的作用是根据 searchText 过滤 options 数组中的选项。react-custom-selectize 已经内置了一些常见的过滤策略，如 fuzzyMatchingFilter、prefixFilter、caseSensitiveFilter 等。
键盘操作
使用键盘在下拉菜单中选项之间进行导航和选择非常常见，react-custom-selectize 内置了键盘操作功能。
- 向上/下箭头和回车键：选择当前焦点选项；
- Tab 键：关闭下拉菜单；
- Esc 键：取消当前的选中状态。
自定义选项
有时候我们希望更灵活地定制选项，可能需要使用自定义组件代替默认的选项元素。这可以通过 renderOption prop 来实现：
-- -------------------- ---- -------
-------- --------------- -
------ -
---- -----------------------------
---- -------------------- ----------------- --
--------------------------
------
--
-
-------- -------------------- -
------ -
---------
------------------
-----------------------------------------------------------
--------------------
--
--
-
------- ----------------- --------------------------- --通过 renderOption 函数可以使用自定义组件构造每个选项元素。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -------------------------
----- ------- - -
- ------ --------- ------ -------- --
- ------ -------- ------ ------- --
- ------ --------- ------ -------- --
- ------ ------- ------ ------ --
--
-------- ---------------------- ----------- -
------ --------------------- --
-------------------------------------------------------------
--
-
-------- --------------- -
------ -
---- -----------------------------
---- -------------------- ----------------- --
--------------------------
------
--
-
-------- -------------------- -
------ -
---------
------------------
-----------------------------------------------------------
--------------------
--
--
-
-------- ------------------------ -
----------------------- -------
-
-------- ---------- -
------ -
-------
-----------------
----------------------
---------------------------
---------------------------------
-------------------------------
---------------------------
--
--
-结论
react-custom-selectize 是一个非常实用的 React 组件库，它提供了方便的 API 和高级功能，使开发者可以轻松地实现定制化的表单选择功能。本文介绍了 react-custom-selectize 的安装、基本用法、样式定制化、常用参数、进阶用法以及示例代码，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553aa81e8991b448d0e6e