在react+antd项目中，多个项目中均出现使用tag的时候出现删除标签失败或者删除错误等问题。
这个bug查找无果，因此使用div重新写了一个tag和badge的组合体组件。
该文章需要具备以下知识：
1 使用react创建项目
2 安装第三方组件
3 组件的调用
效果图如下：
code比较粗糙，未进行任何提炼
直接调用 TagAndBadge 即可。
code如下：
import React, { Component } from 'react'
import {Button} from 'antd'
export default class TagAndBadge extends Component {
state = {
join_sign:"&&",
tf_obj_list:[
{key:"inline",value:3},
{key:"1",value:30},
{key:"display",value:2},
{key:"tf",value:13},
{key:"a",value:22},
{key:"on",value:1},
{key:"more_like_this",value:24},
{key:"isme",value:1},
{key:"function",value:11},
{key:"testdiv",value:3},
{key:"xxxxxxxxxxxxxxxxxxxx",value:23},
{key:"nbsp",value:3},
{key:"10px",value:12},
{key:"div",value:31},
{key:"style",value:300}]
}
TageBtn=(e)=>{
const {tf_obj_list, join_sign} = this.state
let new_tf_obj_list = []
let id_list = e.currentTarget.id.split(join_sign)
for (var i=0; i<tf_obj_list.length; i++){
let obj = tf_obj_list[i]
if (obj.key===id_list[1] && obj.value.toString() === id_list[0]){
continue
}
new_tf_obj_list.push(obj)
}
this.setState({tf_obj_list:new_tf_obj_list})
debugger
}
TestDiv=()=>{
const {tf_obj_list, join_sign} = this.state
let div_list = []
for (var i=0; i<tf_obj_list.length; i++){
let obj = tf_obj_list[i]
div_list.push(
// display:"inline-block" 所有div一行显示
<div style={{display:"inline-block"}}>
<div style={{display:"inline-block",
backgroundColor:"#28a745", //设置背景色
borderRadius:"10px", //设置四个角为圆角
height:"25px", //设置div高度
}}
> <strong>{obj.key}</strong>
<div style={{display:"inline-block",
backgroundColor:"red", //设置背景色
borderRadius:"5px", //设置四个角为圆角
}}>
<font color="white">{obj.value}</font>
</div>
<Button
ghost={true} //按钮背景透明；和background相同只需要开启一个就行
id={obj.value.toString()+join_sign+obj.key}
onClick={(e)=>this.TageBtn(e)}
size="small"
style={{
borderWidth:"0px", //边框透明
// background:"transparent" //按钮背景透明
}}>
<font color="white">Χ</font>
</Button>
</div>
</div>
)
}
return div_list
}
render() {
return (
<div>{this.TestDiv()}</div>
)
}
}