背景
在前端开发的过程中,一些表单的输入经常需要输入多个内容,如果采用一个输入框+逗号分隔的方式,展示起来不是很清晰,一般需要采用标签的方式
需求
可以指定空状态时的标题
设置标签颜色
每个标签的最大长度...:颜色
form,name:处理的表单和对应的字段
const { title = '新增一个', separator = ',', maxLength = 40, color = 'orange',...,先定义一个变量来记录我们已经添加的标签
const [tags, setTags] = useState([]); // 待分隔列表
当鼠标在输入框外部点击或者敲击回车的时候,都需要添加一个标签
所以需要给输入框添加...:handleInputConfirm
拿到之前的标签+本次输入的,一起放到tags变量中
给表单设置一下这个值(用分隔标记拼接起来)
隐藏输入框
清空输入框
/*
* 新增一个tag
* */
const...join(separator) });
};
编辑状态
当我们处于编辑状态的时候,打开表单后,它原本就有内容了
监听一下表单的内容,如果存在,则使用分隔标记分隔后塞入tags中
useEffect((