背景
在前端开发的过程中,一些表单的输入经常需要输入多个内容,如果采用一个输入框+逗号分隔的方式,展示起来不是很清晰,一般需要采用标签的方式
需求
可以指定空状态时的标题
设置标签颜色
每个标签的最大长度...(字符数)
接口传递的时候的分隔标记(是用逗号,还是其他)
直接处理表单,不需要二次处理
所以需要传入以下内容给该组件
title:标题
separator:分隔标记
maxLength:最大长度
color...color = 'orange', form, name } = props;
TagInput.propTypes = {
title: PropTypes.string, // 新增一个tag的标题...`${tag.slice(0, 20)}...` : tag}
);
handleClose方法:
过滤tags中不需要的tag并更新
重新给表单对应的键值对赋值
/*
* 删除某个...join(separator) });
};
编辑状态
当我们处于编辑状态的时候,打开表单后,它原本就有内容了
监听一下表单的内容,如果存在,则使用分隔标记分隔后塞入tags中
useEffect((
云服务器
ICP备案
对象存储
云直播
腾讯会议
