npm 包 react-reusable-select 使用教程

阅读时长 7 分钟读完

随着前端技术的不断发展,我们经常需要使用到一些常用组件,其中下拉框(select)是常常被用到的一个组件,本文介绍npm包 react-reusable-select 的使用教程。

react-reusable-select 简介

react-reusable-select 是一个基于 React 开发的、可以自定义样式的下拉框组件,它提供了丰富的功能和易用的 API,可以让我们快速构建出符合我们要求的下拉框。

安装

npm install react-reusable-select

使用

基本用法

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

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

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

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

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

这里定义了一个options数组,用来作为选项列表。在handleChange方法中,每次下拉框的选中值发生变化时会调用它,将选中的值更新到组件的状态中,同时将这个方法传递给了Select组件。可以通过valueonChange属性将这个组件与状态关联起来,再把options传递给它,就可以渲染出一个基本的下拉框了。

深入使用

react-reusable-select 提供了很多自定义的 props 来满足我们的需求,使得它变得更加强大、易用和灵活。

手动控制打开/关闭下拉框

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

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

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

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

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

这个例子中,在组件状态里新增了一个 isOpen 变量,表示下拉框是否打开。同时,最外层的 Select 组件的 isOpen 属性通过这个变量控制是否打开下拉框。打开下拉框可以通过 onOpen 或者直接把 isOpen 设为 true 实现,关闭下拉框可以通过 onClose 或者直接把 isOpen 设为 false。最后,通过 renderToggle 属性,我们可以自定义渲染下拉框的 trigger,在这个例子里,是一个按钮。

自定义选项的渲染方式

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

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

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

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

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

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

在这个例子里,我们自定义了 renderOption 函数来渲染选项列表,其中 option 表示每个选项,根据传进来的选项渲染出我们需要的样式。将这个函数传递给 renderOption 属性即可。

搜索选项

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

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

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

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

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

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

在这个例子里,我们开启了搜索功能 searchable,并定义了 filterOption 函数,这个函数的作用是根据关键字过滤选项,如果选项的 label 里包含关键字就会被保留。然后将这个函数传递给 filterOption 属性即可。

总结

通过这篇文章,我们学习了如何使用 react-reusable-select 这个 npm 包,了解了它的基本用法和一些高级特性,希望本文可以对想要使用它的同学提供指导和帮助。

完整示例代码见 https://codesandbox.io/s/react-reusable-select-6enwn

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005596781e8991b448d6ec2

纠错
反馈