React Draggable Tags使用教程

React Draggable Tags 是一个 React 组件，用于创建可拖拽的标签，可以方便地在项目中使用。下面是使用教程：

1. 安装 React Draggable Tags：

npm install react-draggable-tags

2. 引入组件：

import { DraggableTags } from 'react-draggable-tags';

3. 创建标签列表：

const tags = [
  { id: 1, text: '标签1' },
  { id: 2, text: '标签2' },
  { id: 3, text: '标签3' },
];

4. 创建回调函数：

function handleTagsChange(tags) {
  console.log(tags);
}

5. 渲染组件：

<DraggableTags tags={tags} handleTagsChange={handleTagsChange} />

6. 可选项：

可以通过传递 props 来自定义组件的行为和外观，例如：

- `allowDelete`: 是否允许删除标签，默认为 `true`
- `allowAdd`: 是否允许添加标签，默认为 `true`
- `allowDrag`: 是否允许拖拽标签，默认为 `true`
- `tagStyle`: 标签的样式
- `inputStyle`: 输入框的样式
- `deleteIcon`: 删除图标的样式
- `addIcon`: 添加图标的样式

例如：

<DraggableTags
  tags={tags}
  handleTagsChange={handleTagsChange}
  allowDelete={false}
  allowAdd={false}
  allowDrag={true}
  tagStyle={{ backgroundColor: 'lightblue', color: 'white' }}
  inputStyle={{ backgroundColor: 'lightblue', color: 'white' }}
  deleteIcon={<span>✖️</span>}
  addIcon={<span>➕</span>}
/>

以上就是 React Draggable Tags 的使用教程，希望对你有所帮助！