npm 包 @aleccool213/react-select 使用教程

介绍

@aleccool213/react-select 是一个基于 React 的可定制化的选择框组件，它提供了一批达到市场领先水平的交互功能，如：自定义选项关键词匹配、异步加载选项、深度集成 React-Virtualized 以提高性能、多选和标签化等。

安装

使用 @aleccool213/react-select 前先需要安装 React。

使用 npm 安装:

npm i react @aleccool213/react-select

使用

1. 引入 Select 和必需的 CSS 文件。

import React from 'react';
import Select from '@aleccool213/react-select';
import '@aleccool213/react-select/dist/react-select.css';

1. 当单选时需要初始化选项，创建一个选项数组，将其传入 Select 组件中作为 options props。

const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' }
];

<Select options={options} />

1. 当多选时需要创建一个初始选项数组，将其传入 Select 组件中作为 value props。

-- -------------------- ---- -------
----- ------- - -
  - ------ -------- ------ ------- --
  - ------ --------- ------ -------- --
  - ------ --------- ------ -------- -
--
----- ------------ - -
  - ------ -------- ------ ------- -
--

------- ----------------- -------------------- ------- --

Props

所有的 props 都基于 react-select 的 props。

以下是 @aleccool213/react-select 的自定义 props。

1. isAsync - 加载远程选项数据，默认值为 false。

<Select options={fetchOptions} isAsync />

1. virtualized - 集成 React-Virtualized 以提高性能，默认值为 false。

<Select options={options} virtualized />

1. matchOption - 自定义选项之间的匹配规则，默认方法为 optionsFilter.defaultFilter。

const customFilter = (option: any, filterText: any) => {
  if (option.label === filterText) {
    return true;
  }
  return false;
};
<Select options={options} matchOption={customFilter} />

1. autosize - 选项被选中时自动调整组件宽度，默认值为 false。

<Select options={options} autosize />

1. maxMenuHeight - 下拉菜单最大高度。

<Select options={options} maxMenuHeight={200} />

示例代码

-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ----------------------------
------ --------------------------------------------------

----- ------- - -
  - ------ -------- ------ ------- --
  - ------ --------- ------ -------- --
  - ------ --------- ------ -------- -
--

----- ------------ - -
  - ------ -------- ------ ------- -
--

----- ------- - -- -- -
  ------ -
    -------
      -----------------
      --------------------
      -------
      -------
      -----------
      --------------------------
      --------
      -------------------
    --
  --
--

------ ------- --------

总结

通过 @aleccool213/react-select ，我们可以使用一些先进的交互功能并简化用户操作。使用方法与 React 的其他组件非常相似，如果您想提高可读性，可以尝试使用 TypeScript，让您的代码易于维护，并且在遇到问题时可以帮助您更快地死亡。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556d081e8991b448d3a56