Ant Design tag标签组件在react实现新增、编辑功能

目录

一、效果图

二、导入tag标签组件

二、新增tag标签、定义状态显示input

 三、新增标签input  onChange 、onBlur、onPressEnter事件

四、编辑tag标签显示的input 只在编辑页可编辑

五、点击编辑标签input的事件

六、antd3.0版本的tag编辑示例是没有可编辑的、需要自己去实现、也很简单、跟新增的逻辑差不多、多看看文档就可以

一、效果图

二、导入tag标签组件

                     //tagList 存储的标签数据渲染
                       {this.store.tagList &&
                        this.store.tagList.map((tag, index) => {
                          return (
                            <Tag
                              key={index}
                              closable={index !== -1}
                              onClose={() => this.store.handleClose(tag)}
                              onClick={() =>
                                this.store.handleClickTagVlaue(tag)
                              }
                            >
                              {tag}
                            </Tag>
                          );
                        })}

二、新增tag标签、定义状态显示input

//this.store 我用的mobx状态管理、也可以使用state去定义一个状态值
<div>
        {this.store.inputVisible ? (
          <Input
            ref={this.store.saveInputRef}
            type="text"
            size="small"
            style={{ width: 78 }}
            maxLength={20}
            value={this.store.inputValue}
            onChange={(e) => this.store.handleInputChange(e)}
            onBlur={() => this.store.handleInputConfirm()}
            onPressEnter={() => this.store.handleInputConfirm()}
          />
        ) : (
          <Tag
            onClick={this.store.showInput}
            style={{ background: "#fff", borderStyle: "dashed" }}
          >
            创建新标签
            <Icon type="plus" />
          </Tag>
        )}
      </div>

 三、新增标签input  onChange 、onBlur、onPressEnter事件

//删除标签
handleClose(removedTag) {
    this.tagList = this.tagList.filter((tag) => tag !== removedTag);
 }

saveInputRef = (input) => (this.input = input); 

 showInput = () => {
    this.inputVisible = true;
  };


 handleInputChange(e) {
    this.inputValue = e.target.value;
  }

  handleInputConfirm = () => {
    if (this.tagList.length >= 20) {
      return stores.Frame.warning("最多输入20个标签，每个标签20个字以内");
    }
    this.tagList.map((item) => {
      if (item === this.inputValue) {
        return stores.Frame.warning("不能输入相同的标签");
      }
    });
    if (this.inputValue && this.tagList.indexOf(this.inputValue) === -1) {
      this.tagList = [...this.tagList, this.inputValue];
    }
    this.inputVisible = false;
    this.inputValue = "";
  };

四、编辑tag标签显示的input 只在编辑页可编辑

{this.store.editInputVisible && this.store.editId && (
<Input
  type="text"
  className="edit_input"
  style={{ width: "100px" }}
  value={this.store.editInputValue}
  onChange={(e) => this.store.changeEditTagValue(e)}
  onPressEnter={(e) => this.store.handleMouseBlurValue(e)}
  maxLength={20}
  onBlur={(e) => this.store.handleMouseBlurValue(e)}
></Input>
)}
     

五、点击编辑标签input的事件

  handleClickTagVlaue = (editTag) => {
    if (this.editId) {
      this.editInputValue = editTag;
      this.tagList = this.tagList.filter((item) => item !== editTag);
      this.editInputVisible = true;
    }
  };
  handleMouseBlurValue(e) {
    e.preventDefault();
    if (this.editInputValue) {
      this.editInputVisible = false;
      this.tagRulet = false;
      this.tagList.unshift(this.editInputValue);
    }
  }


//输入框检验
  changeEditTagValue(e) {
    e.preventDefault();
    this.editInputValue = e.target.value;
    if (this.editInputValue.length === 0) {
      stores.Frame.warning("编辑标签不能为空");
    }
    this.tagList.map((item) => {
      if (item === this.editInputValue) {
        stores.Frame.warning("不能输入相同的标签");
      }
    });
  }

六、antd3.0版本的tag编辑示例是没有可编辑的、需要自己去实现、也很简单、跟新增的逻辑差不多、多看看文档就可以