标签输入框
渲染一个标签输入框。
- 定义一个
TagInput
组件,并使用useState()
钩子从tags
初始化一个数组。 - 使用
Array.prototype.map()
在收集到的节点上渲染标签列表。 - 定义
addTagData
方法,当按下Enter
键时执行。 addTagData
方法调用setTagData
,使用展开运算符 (...
) 在现有标签之前添加新标签,并将新标签添加到tagData
数组的末尾。- 定义
removeTagData
方法,当点击标签中的删除图标时执行。 - 在
removeTagData
方法中使用Array.prototype.filter()
根据标签的索引将其从tagData
数组中过滤掉。
.tag-input {
display: flex;
flex-wrap: wrap;
min-height: 48px;
padding: 0 8px;
border: 1px solid #d6d8da;
border-radius: 6px;
}
.tag-input input {
flex: 1;
border: none;
height: 46px;
font-size: 14px;
padding: 4px 0 0;
}
.tag-input input:focus {
outline: transparent;
}
.tags {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 8px 0 0;
}
.tag {
width: auto;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
padding: 0 8px;
font-size: 14px;
list-style: none;
border-radius: 6px;
margin: 0 8px 8px 0;
background: #0052cc;
}
.tag-title {
margin-top: 3px;
}
.tag-close-icon {
display: block;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
font-size: 14px;
margin-left: 8px;
color: #0052cc;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
const TagInput = ({ tags }) => {
const [tagData, setTagData] = React.useState(tags);
const removeTagData = indexToRemove => {
setTagData([...tagData.filter((_, index) => index !== indexToRemove)]);
};
const addTagData = event => {
if (event.target.value !== '') {
setTagData([...tagData, event.target.value]);
event.target.value = '';
}
};
return (
<div className="tag-input">
<ul className="tags">
{tagData.map((tag, index) => (
<li key={index} className="tag">
<span className="tag-title">{tag}</span>
<span
className="tag-close-icon"
onClick={() => removeTagData(index)}
>
x
</span>
</li>
))}
</ul>
<input
type="text"
onKeyUp={event => (event.key === 'Enter' ? addTagData(event) : null)}
placeholder="按回车键添加标签"
/>
</div>
);
};
ReactDOM.createRoot(document.getElementById('root')).render(
<TagInput tags={['Nodejs', 'MongoDB']} />
);