Ant Design里的Tag标签进行改造

Question

做一个可以删除又可以点击后变成蓝色，我将Tag放在表单里，准备提交的时候为蓝色的标签以数组形式提交。

问题是以下API不共享

所以想通过 每个Tag标签的Index来改变Tag标签颜色，麻烦的是Tag.CheckableTag中的onChange事件返回的参数只有boolean ，所以给它增加了自定义属性

就舍弃了CheckableTag 直接Tag做一个类似于checked的API

{tags.map((tag,index) => {
          const isLongTag = tag.length > 20;
          const tagElem = (
            <Tag
              key={tag}
              closable="true"
              onClose={() => this.handleClose(tag)}
              onClick={this.colorChange}
              color={this.state.color}           //state里的color默认为null
              data-dd={index}                    //自定义属性
            >
              {isLongTag ? `${tag.slice(0, 20)}...` : tag}
            </Tag>
          );
          return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
        })}

  colorChange = (e) =>{
    let a = e.currentTarget.getAttribute('data-dd');
    console.log(a);//打印出index
    if (this.state.color==='') {
      this.setState({
        color: '#108ee9',
      });
    } else{
      this.setState({
        color: '',
      });
    }
      };

然而 我不懂怎么操作通过Index来改变某个tag标签的color

标签状态激活得到data-dd中的value 就是index
我表单提交也只是提交字符串，只要标签是激活状态我就会提交，不是激活状态则不会提交，这个倒是可以判断一下就行。
`{tags.map((tag,index) => {

          const isLongTag = tag.length > 20;
          const tagElem = (
            <Tag
              key={tag}
              closable={true}
              onClose={() => this.handleClose(tag)}
              onClick={this.colorChange}
              color={this.state.color}
              data-dd={index}
            >
              {isLongTag ? `${tag.slice(0, 20)}...` : tag}
            </Tag>
          );
          return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
        })}`
        

Answer 1

“onChange事件返回的参数只有boolean”，感觉不是个问题吧，如果：

...
onChange={(checked) => {
        callback(index, checked)  // callback 是上级指定接收参数的回调函数
    }
}

上级就可以通过 index （这里注意下作用域的问题）获知是哪个tag被修改了吧。
至于“通过 Index 来改变某个 tag 标签的 color ”，也许就是:

 setState({
     color: index === 1 ? "#000": "#fff"
 })