React TagInput 组件 - JavaScript

React TagInput 组件是一个用于标记输入的 React 组件，它允许用户在输入框中输入多个标签并将其显示为单独的项目。

安装

使用 npm 安装：

npm install react-tag-input --save

或使用 yarn 安装：

yarn add react-tag-input

使用

使用 React TagInput 组件，您需要将其导入到您的 React 组件中，然后将其作为常规的 React 组件使用。

import React from 'react';
import TagInput from 'react-tag-input';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <TagInput />
      </div>
    );
  }
}

此时，您将在浏览器中看到一个空的输入框，可以使用标签输入。

属性

React TagInput 组件具有许多不同的属性，可以根据您的需求进行配置。

tags

该属性定义 TagInput 的当前标签，可以是一个字符串数组。

<TagInput tags={['JavaScript', 'React', 'HTML', 'CSS']} />

removeOnBackspace

该属性定义是否在按下退格键时自动删除最后一个标签。默认值为 true。

<TagInput removeOnBackspace={false} />

placeholder

该属性定义 TagInput 输入框中显示的占位符文本。

<TagInput placeholder='请输入标签...' />

maxTags

该属性定义可以在 TagInput 中添加的最大标记数。默认值为 Infinity。

<TagInput maxTags={5} />

addOnBlur

该属性定义是否在输入框失去焦点时自动添加标签。默认值为 false。

<TagInput addOnBlur={true} />

tagRegex

该属性定义标签的正则表达式，以允许或禁止特定字符输入。

<TagInput tagRegex={/^[a-zA-Z]*$/} />

事件

React TagInput 组件还允许您定义许多事件，以便在标签输入时执行特定的操作。

handleAddition

此事件在添加标签时触发，将新标签作为参数传递。

handleAddition = (tag) => {
  console.log('Added tag:', tag);
}

<TagInput handleAddition={this.handleAddition} />

handleDelete

此事件在删除标签时触发，将要删除的标签作为参数传递。

handleDelete = (tag) => {
  console.log('Deleted tag:', tag);
}

<TagInput handleDelete={this.handleDelete} />

handleInputChange

此事件在输入框内容发生更改时触发，将当前输入框的值作为参数传递。

handleInputChange = (value) => {
  console.log('Input changed:', value);
}

<TagInput handleInputChange={this.handleInputChange} />

handleValidate

此事件在尝试添加标签时触发，以进行特定的验证。如果验证失败，则阻止添加标签，并将错误消息作为参数传递。

handleValidate = (tag) => {
  if (tag.length < 5) {
    return '标签必须大于 5 个字符';
  }
}

<TagInput handleValidate={this.handleValidate} />

样式

React TagInput 组件允许您使用 CSS 样式表自定义其外观和样式。您可以使用类名选择器来定义各种样式规则。

.tag-input-wrapper {
  border: 1px solid #ccc;
  padding: 10px;
}

.tag-input {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    color: #495057;
    background-color: #e2e3e5;
    border-radius: 0.25rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

.tag-input-remove-button {
    margin-left: 0.5rem;
    cursor: pointer;
}

结论

React TagInput 组件是一个非常有用的 React 组件，可用于在 Web 应用程序中的标记输入。希望你们喜欢！