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

ant

官网链接 ： https://ant.design/components/select-cn/

<Col span={24}>
     <Form.Item
     label="添加字段"
     className="filed-select"
     rules={[{ required: true, message: '请添加字段' },]}>
        <Form.Item noStyle name={`guanlian${item.Id}`}>
               <Select
               mode="multiple"
               placeholder="请添加字段"
               tagRender={(p) => this.tagRender(p, item.Id)}
               open={this.state[`relationOpen${item.Id}`]}
               key={item.Id}
               onDropdownVisibleChange={(open) => {this.onDropdownVisibleChange(open, item.Id)}}>
                   {this.state[`filedData${index}`] &&
                   this.state[`filedData${index}`].map(
                   (item) => {
                       return (
                           <Option value={item.Id} key={item.Id}>
                                  {item.InTableFieldNameCN}
                           </Option>)
                  })}
               </Select>
       </Form.Item>
       <Button onClick={() => this.showDrawerIsEdit(item)}>
               关联字段
       </Button>
   </Form.Item>
</Col>

js

tagRender = (props, id) => {
    const { label, value, closable, onClose } = props
    const confirmRelation = () => {
      this.setState({
        relationNewOpen: false,
      })
      let RelationData = []
      //通过接口返回值，进行不同的select 的数据源进行赋值
      for (let i = 0; i < this.state.relationDeleteData.length; i++) {
        RelationData.push({
          ...this.state.relationDeleteData[i].RelationData,
        })
      }

      let ID = ''
      //根据当前select 的id 判断当前id 下的Option 的id  进行判断选中进行删除操作，此操作避免多个数据源一样时进行操作，会删除其他中的选项
      RelationData.map((item) => {
        let newItem = Object.values(item)
        newItem.some((element) => {
          if (element.PId === id) {
            if (element.RelationFieldId === value) {
              ID = element.Id
              return element
            }
          }
        })
      })
      let params = { Id: ID }
      if (ID) {
        DeleteBusinessAssociationOnlyOne(params)
          .then((res) => {
            if (res.data.Success) {
              message.success('删除成功！')
              this.getAllFiledList()
              //给气泡框多加一个id进行区别，避免两个一样的数据源的value值一样，点击其中一个剩下的也会自动打开的操作
              this.setState({
                [`openRelation${value}${id}`]: false,
              })
              onClose()
            } else {
              message.error(res.data.Error)
              this.setState({
                [`openRelation${value}${id}`]: false,
              })
            }
          })
          .catch((err) => {
            message.error(err)
            this.setState({
              [`openRelation${value}${id}`]: false,
            })
          })
      } else {
        this.setState({
          [`openRelation${value}${id}`]: false,
        })
        onClose()
      }
    }
    // 点击取消时调用
    const cancelRelation = (event) => {   
      event.preventDefault()
      event.stopPropagation()
      this.setState({
        [`openRelation${value}${id}`]: false,
        relationNewOpen: false,
      })
    }
    // 具体的方法可以通过ant  官网的api去查找
    const onPreventMouseDown = (event) => {
      event.preventDefault()
      event.stopPropagation()
    }

    return (
      <Popconfirm
        title="您确定要删除?"
        visible={this.state[`openRelation${value}${id}`]}
        onConfirm={confirmRelation}
        onMouseDown={onPreventMouseDown}
        onCancel={cancelRelation}
        okText="确定"
        cancelText="取消"
      >
        <Tag
          closable
          onMouseDown={onPreventMouseDown}
          onClose={(e) => {
            e.preventDefault()
            this.setState({
              [`openRelation${value}${id}`]: true,
              relationNewOpen: true,
            })
          }}
          style={{
            marginRight: 3,
          }}
        >
          {label}
        </Tag>
      </Popconfirm>
    )
  }

//展开下拉菜单的回调函数
  onDropdownVisibleChange = (open, openId) => {   
    let newAllFiledList = [...this.state.allFiledList]
    let itmeId = []
    newAllFiledList.map((item) => {
      itmeId.push({
        Id: item.Id,
      })
    })
    let relationOpenId = ''
    itmeId.some((item) => {    //进行id匹配判断 当前选中的
      if (item.Id === openId) {  
        relationOpenId = openId
        return item
      }
    })
    //判断当前是那个select下拉框的id 进行展开关闭
    if (open && this.state.relationNewOpen == false) {   
      this.setState({
        [`relationOpen${relationOpenId}`]: open,
      })
    } else if (this.state.relationNewOpen == true || open == false) {
      this.setState({
        [`relationOpen${relationOpenId}`]: false,
      })
    } else {
      this.setState({
        [`relationOpen${relationOpenId}`]: open,
      })
    }
  }