react + ant select自定义多选+Popconfirm气泡提示框 【单个】

js 部分：可以查看ant api 进行理解

tagRender = (props) => {   //自定义方法  可以查看ant api 进行理解
    const { label, value, closable, onClose } = props
    const confirmRelation = () => {   //确定调用
      this.setState({
        Relationshow: value,
        relationNewOpen: false,
      })
      let RelationData = this.state.relationDeleteData[0].RelationData
      let ID = ''
      RelationData.some((item) => {
        if (item.RelationFieldId === value) {
          ID = item.Id
          return item
        }
      })
      let params = { Id: ID }
      if (ID) {
        DeleteBusinessAssociationOnlyOne(params)
          .then((res) => {
            if (res.data.Success) {
              message.success('删除成功！')
              this.getAllFiledList()
              this.setState({
                [`openRelation${value}`]: false,
              })
              onClose()
            } else {
              message.error(res.data.Error)
              this.setState({
                [`openRelation${value}`]: false,
              })
            }
          })
          .catch((err) => {
            message.error(err)
            this.setState({
              [`openRelation${value}`]: false,
            })
          })
      } else {
        this.setState({
          [`openRelation${value}`]: false,
        })
        onClose()
      }
    }
    const cancelRelation = (event) => {   //取消调用
      event.preventDefault()
      event.stopPropagation()
      this.setState({
        [`openRelation${value}`]: false,
        relationNewOpen: false,
      })
    }
    const onPreventMouseDown = (event) => {    //阻止冒泡
      event.preventDefault()
      event.stopPropagation()
    }

    return (
      <Popconfirm
        title="您确定要删除?"
        visible={this.state[`openRelation${value}`]}  //是否显示
        onConfirm={confirmRelation}
        onMouseDown={onPreventMouseDown}
        onCancel={cancelRelation}
        okText="确定"
        cancelText="取消"
      >
        <Tag
          closable
          onMouseDown={onPreventMouseDown}
          onClose={(e) => {
            e.preventDefault()
            this.setState({
              [`openRelation${value}`]: true,
              relationNewOpen: true,
            })
          }}
          style={{
            marginRight: 3,
          }}
        >
          {label}
        </Tag>
      </Popconfirm>
    )
  }
  onDropdownVisibleChange = (open) => {		//展开下拉菜单的回调
    if (open && this.state.relationNewOpen == false) {
      this.setState({
        relationOpen: open,
      })
    } else if (this.state.relationNewOpen == true || open == false) {
      this.setState({
        relationOpen: false,
      })
    } else {
      this.setState({
        relationOpen: open,
      })
    }
  }
render（）{
	const relationdataList = openRelationList.map((item) => {
      return (
        <Option value={item.Id} key={item.Id}>
          {item.InTableFieldNameCN}
        </Option>
      )
    })
}

ant :

<Form.Item
           label="添加"
           className="filed-select"
           rules={[
              { required: true, message: '请添加' },
          ]}>
    <Form.Item noStyle name={`guanlian${item.Id}`}>
         <Select
	           mode="multiple"
	           placeholder="请添加"
	           tagRender={this.tagRender}
	           open={relationOpen}
	          onDropdownVisibleChange={
	           this.onDropdownVisibleChange
	           } >
	               {relationdataList}
         </Select>
	</Form.Item>
 </Form.Item>

效果图：