react+antd Input回车输入生成tag组件

实现的组件样式

focus效果

 代码：

import React from 'react'
import { Input, Tag, Tooltip } from 'antd';
import { CloseCircleFilled } from '@ant-design/icons'
import isEqual from 'lodash/isEqual'
import './index.less'

interface ITagState {
  tags: string[]
  inputValue: string
}

interface ITagProps {
  value?: []
  onChange?: (value) => void
}

class EditableTagGroup extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      tags: props.value || [],
      inputValue: ''
    }
  }
  input: HTMLElement
  handleClose = removedTag => {
    const tags = this.state.tags.filter(tag => tag !== removedTag);
    this.setState({ tags });
  };
  refDom = () => {
    return <>
      {this.state.tags.map((tag, index) => {
        const isLongTag = tag.length > 20
        const tagElem =  this.handleClose(tag)}
          closeIcon={}
        >
          {isLongTag ? `${tag.slice(0, 20)}...` : tag}
        

        return isLongTag ? (
          
            {tagElem}
          
        ) : (
          tagElem
        );
      })}
    
  }
  inputChange = (e) => {
    this.setState({
      inputValue: e.target.value
    })
  }
  addTag = (e) => {
    const value = e.target.value
    if (value) {
      this.setState({
        tags: [
          ...this.state.tags,
          value
        ],
        inputValue: ''
      })
    }
  }
  componentDidUpdate(prevProps, prevState) {
    if (!isEqual(prevProps.value, this.props.value)) {
      this.setState({
        tags: this.props.value
      })
    }
    if (!isEqual(prevState.tags, this.state.tags)) {
      console.log(prevState.tags, this.state.tags);
      if (this.props.onChange) {
        this.props.onChange(this.state.tags)
      }
    }
  }
  saveInputRef = input => {
    this.input = input;
  };
  clickEdit = () => {
    this.input.focus()
  }
  render() {
    const { inputValue } = this.state
    return (
      

        
{this.refDom()}
        
      
    )
  }
}

export default EditableTagGroup

.editable {
  height: 80px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  &:focus-within,
  &:hover {
    border-color: rgba(22, 119, 254, 1);
    box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
  }
  .ant-input {
    border: none;
    height: 32px;
    &:hover,
    &:focus {
      box-shadow: none;
      border: none;
    }
  }
  .show {
    flex: 1;
    min-height: '47px';
    overflow: auto;
    padding: 0 5px;
    .ant-tag {
      color: #5a5e66;
      padding: 2px 8px;
      font-size: 12px;
      border: none;
      border-radius: 3px;
      background-color: rgba(240, 242, 245, 1);
      .close-icon {
        color: rgba(192, 196, 204, 1);
        margin-left: 2px;
        font-size: 12px;
      }
    }
  }
}