react-draggable-tags组件如何使用
时间: 2023-12-30 13:02:42 浏览: 174
react-draggable-tags 是一个 React 组件,用于实现可拖拽的标签列表。使用 react-draggable-tags 组件,你需要先安装该组件,可以使用 npm 安装,命令如下:
```
npm install react-draggable-tags
```
接着,在项目中导入 react-draggable-tags 组件,代码如下:
```jsx
import React, { useState } from 'react';
import DraggableTags from 'react-draggable-tags';
function App() {
const [tags, setTags] = useState([
{ id: 1, text: 'React' },
{ id: 2, text: 'Vue' },
{ id: 3, text: 'Angular' },
]);
const handleTagsChange = (tags) => {
setTags(tags);
};
return (
<DraggableTags tags={tags} handleTagsChange={handleTagsChange} />
);
}
export default App;
```
在上面的代码中,我们首先使用 useState 定义了一个 tags 状态,用于存储标签列表。接着,我们通过 DraggableTags 组件渲染了一个可拖拽的标签列表,并通过 handleTagsChange 回调函数来处理标签列表的变化。
最后,需要注意的是,react-draggable-tags 组件的样式需要自己定义或者引用外部样式库。
阅读全文