ReactJS常青标签输入组件

ReactJS常青标签输入组件是一个基于ReactJS开发的标签选择器组件。它可以让用户输入或选择一组标签，可以很方便的在表单中使用。

安装和使用

安装

您需要安装node.js和npm，以便于使用npm安装ReactJS常青标签输入组件。

npm install react-evergreen-tags-input

使用

import React from 'react';
import { EvergreenTagsInput } from 'react-evergreen-tags-input';

class App extends React.Component {
  state = {
    tags: ['apple', 'banana', 'cherry'],
  }
  handleChange = (tags) => {
    this.setState({ tags: tags });
  }
  render() {
    return (
      <EvergreenTagsInput 
        placeholder="Enter tags" 
        tags={this.state.tags} 
        onChange={this.handleChange} 
      />
    );
  }
}

API

EvergreenTagsInput

props

| Name | Type | Default | Description | | ----------------------| ------------------------------| ---------------| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | tags | array of string | [] | 一组标签，必须是字符串数组。 | | onChange | function | | 标签集合发生变化时，触发该函数，它接收一个参数，其中包含了最新的标签集合。 | | allowUnique | boolean | true | 是否允许标签集合中的标签唯一。 | | allowCreate | boolean | true | 是否允许创建新标签。 | | placeholder | string | [Enter tags] | 输入框的占位符。 | | maxTags | number | Infinity | 标签的最大数量。 | | validate | function | | 用于验证输入的函数，它接收一个标签作为参数，并在检查完毕后返回布尔值。 | | validateOnBlur | boolean | false | 是否仅在输入框失去焦点后验证标签。 | | parseOnBlur | boolean | false | 指定是否在输入框失去焦点时将输入转换为一个标签。这意味着，如果用户在输入时敲下“Enter”键而不是使用逗号或回车键来分隔标签，则该输入将被强制转换为标签。 | | tagComponent | function or Component | | 用于自定义标签组件的方法或组件。默认情况下，会使用内置的标签组件。 | | suggestionListComponent| function or Component | | 用于自定义建议列表的方法或组件。默认情况下，会使用内置的建议列表组件。 | | suggestions | array of string or function | [] | 包含所有建议标签的数组。它可以是一个字符串数组，也可以是接受当前输入字符串并返回包含字符串的promise数组的函数。 | | filterSuggestions | function | (text, sugg) => sugg.filter(tag => tag.toLowerCase().indexOf(text.toLowerCase()) !== -1) | 过滤建议标签的函数，它接收输入的字符串和所有建议数组，然后返回过滤后的数组。 | | uniqueTagClassName | string | '' | 对于标签集合中唯一的标签，显示的类名。 | | duplicatedTagClassName | string | '' | 对于重复出现的标签，显示的类名。 | | invalidTagClassName | string | '' | 对于无效标签，即未通过验证的标签，显示的类名。 | | focusedTagClassName | string | '' | 对于聚焦的标签，显示的类名。 | | tagContainerClassName | string | '' | 标签集合容器的类名。 | | tagInputClassName | string | '' | 输入框组件的类名。 | | tagSuggestionClassName | string | '' | 建议列表的类名。 |

示例

更多示例请参见 examples。

import React from 'react';
import { EvergreenTagsInput } from 'react-evergreen-tags-input';

class App extends React.Component {
  state = {
    tags: ['apple', 'banana', 'cherry'],
  }
  handleChange = (tags) => {
    this.setState({ tags: tags });
  }
  render() {
    return (
      <EvergreenTagsInput 
        placeholder="Enter tags" 
        tags={this.state.tags} 
        onChange={this.handleChange} 
        allowUnique={false}
        allowCreate={false}
        maxTags={3}
        validateOnBlur
        suggestions={['orange', 'pear', 'watermelon']}
        filterSuggestions={(text, sugg) => sugg.filter(tag => tag.toLowerCase().startsWith(text.toLowerCase()))}
      />
    );
  }
}

结论

ReactJS常青标签输入组件可以极大地方便开发人员在表单中添加标签选择器，而无需考虑复杂的实现方式。它提供了许多有用的特性和定制选项，因此可以轻松地适应不同的使用案例。此标签输入组件是一个优秀的ReactJS组件，建议您尝试一下。