fix-修复Tag文档组件问题

[gssggssg]

#598 修复

[jaywcjlove]

@gssggssg 使用 value 会出问题的吧， value 如果相同就出警告了

[nullptr-z]

@gssggssg 相关修复在:

• fix(SearchTree): 组件内部内部回调函数在闭包环境中,导致回调函数中无法拿到最新值 #593 #603

该是因为:Tag组件内部使用useMemo返回组件渲染,但是没有在合适的时候进行刷新,所以onClose回调的参数都是闭包创建时的副本

---

• Tag: 不能正确删除标签 #598

该issue中提交到解决方案,使用item.value可以解决,但是任然存在问题

1. item.value可能重复;
2. item.value解决了刷新问题是因为,demo中使用的是class组件onClose使用了this这个指针调用setState刷新dataTags, 避开了闭包问题,如果demo使用function组件问题还是存在的

onClose(data) {
    const dataTags = this.state.dataTags.filter(item => item.value !== data.value);
    this.setState({ dataTags });
  }

相关问题已经在最新版中修复,可以使用v4.13.4以前对版本function组件版本的demo进行测试

import React from 'react';
import ReactDOM from 'react-dom';
import { Tag, Button, Icon } from 'uiw';

let num = 3;
function Demo() {
  const [dataTags, dataTagSet] = React.useState([
    { label: '橘子', value: 1, color: '#28a745' },
    { label: '苹果', value: 2, color: '#F95C2B' },
    { label: '橘子', value: 3, color: '#008EF0' },
  ])

  const onClose = (data) => {
    const dataTagTemp = dataTags.filter(item => item.value !== data.value);
    dataTagSet(dataTagTemp);
  }
  const addTag = () => {
    num += 1;
    dataTags.push({
      label: `橘子${num}`, value: num, color: '#28a745'
    });
    dataTagSet(dataTags);
  }

  return (
    <div>
      {dataTags.map((item, idx) => {
        console.log(item, idx)
        return (
          <Tag
            key={item.value}
            closable
            onClose={() => onClose(item)}
            // visible={this.state.visible}
            color={item.color}>
            {item.label}
          </Tag>
        )
      })}
      <Button style={{ marginLeft: 5, minHeight: 20, padding: 0 }} size="small" onClick={addTag}> <Icon type="plus" /> </Button>
    </div>
  );
}
ReactDOM.render(<Demo />, _mount_);