npm 包 @jamieparkinson/material-ui-chip-input 使用教程

Node Package Manager（npm）是一个非常方便的 JavaScript 包管理器，用于在项目中安装、管理和分享代码。其中包括许多前端库，比如 @jamieparkinson/material-ui-chip-input，它提供了一个 Material UI 风格的可编辑 chip 输入框，可以方便地添加、删除标签。在这篇文章中，我们将学习如何使用这个 npm 包。

安装

在使用这个 npm 包之前，我们需要先安装它。我们可以使用以下命令：

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

这个命令将安装 @jamieparkinson/material-ui-chip-input 并将它添加到我们的项目中。

基本使用

下面我们来看看如何在项目中使用 @jamieparkinson/material-ui-chip-input。

首先，我们需要导入 @jamieparkinson/material-ui-chip-input：

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

然后，在我们的 React 组件中，我们可以将 ChipInput 渲染到 DOM 中：

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

以上代码中，我们传递了以下 props：

value：用于显示当前所有的标签；
onAdd：当用户添加新的标签时触发的回调函数，可以将新标签添加到状态中；
onDelete：当用户删除标签时触发的回调函数，可以将被删除的标签从状态中删除。

更多配置

除了基本 props 之外，@jamieparkinson/material-ui-chip-input 暴露了许多其他配置项，允许我们自定义它的外观和行为。例如，我们可以定制标签的样式、提示文本、最小输入长度和限制最大标签数。

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

在以上代码中，我们添加了以下配置项：

label：用于显示输入框的标签；
fullWidth：使输入框宽度占据整个父容器；
variant：指定输入框的外观；
newChipKeyCodes：允许用户在输入框中输入哪些键位字符来添加新标签；
placeholder：在输入框为空时显示的文本；
disabled：指定输入框是否应该被禁用；
error：指定输入框是否应该显示错误状态；
helperText：当输入框处于错误状态时显示的文本；
chipRenderer：允许我们自定义每个标签的外观和行为。

完整示例

下面是一个完整的示例，演示如何使用 @jamieparkinson/material-ui-chip-input：

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

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

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

我们使用 ChipInput 组件来实现一个可编辑的标签输入框，内部状态保存在 tags 中，同时我们使用了许多配置项来确保输入框的行为和外观满足我们的需求。

结论

在这篇文章中，我们学习了如何使用 @jamieparkinson/material-ui-chip-input 这个 npm 包来实现一个可编辑的 Material UI 风格的标签输入框，在使用它的过程中，我们掌握了一些配置项来自定义输入框的行为和外观，这可能对于我们在实际项目中处理标签及输入内容等场景提供了一些指导意义。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/600551c581e8991b448cf26a