npm 包 @kovalskiy_dmitriy/react-multi-select 使用教程

阅读时长 4 分钟读完

简介

@kovalskiy_dmitriy/react-multi-select 是一款 React 组件的 npm 包,可以帮助我们实现多选框效果的组件,用起来非常方便。

安装

在终端中切换至你的项目文件夹,然后输入以下命令:

使用

  1. 导入组件

在你的 React 组件中导入 @kovalskiy_dmitriy/react-multi-select 组件:

  1. 在 render 函数中使用组件

在 render 函数中使用 MultiSelect 组件,并传入相应的参数:

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

其中,options 属性用于传入所有可选的选项(格式为一个对象数组);selected 属性用于传入当前选中的选项(格式同样为一个对象数组);showTags 属性用于设置是否显示已选中选项的标签;onSelect 属性用于传入选项被选中时的回调函数;onRemove 属性用于传入选项被移除时的回调函数。

  1. 完整示例代码
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----------- ---- ----------------------------------------

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

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

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

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

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

总结

@kovalskiy_dmitriy/react-multi-select 是一款非常实用的多选框组件,使用起来方便易懂。通过以上的使用教程,相信大家已经能够轻松地在自己的项目中使用它了。

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

纠错
反馈