:颜色
form,name:处理的表单和对应的字段
const { title = '新增一个', separator = ',', maxLength = 40, color = 'orange',...因为有多个标签,先定义一个变量来记录我们已经添加的标签
const [tags, setTags] = useState([]); // 待分隔列表
当鼠标在输入框外部点击或者敲击回车的时候,都需要添加一个标签...setInputValue(e.target.value)}
onBlur={handleInputConfirm}
onPressEnter={handleInputConfirm}
/>
编写添加标签的方法...,将它展示出来
判断字符串长度,如果大于我们配置的最大长度则裁剪,没有则全部展示
超长的标签增加一个气泡提示,鼠标移动上去后可以看到全部内容
{tags.map((tag) => {
const isLongTag...join(separator) });
};
编辑状态
当我们处于编辑状态的时候,打开表单后,它原本就有内容了
监听一下表单的内容,如果存在,则使用分隔标记分隔后塞入tags中
useEffect((