Ant Design 3.x版本Select组件自定义标签添加编辑按钮方案求助

由于Ant Design 3.x版本的Select组件在tags模式下不支持tagRender属性，无法直接自定义标签结构，我们可以通过DOM操作结合React状态管理的方式，给每个标签的关闭按钮旁添加编辑按钮，具体实现如下：

核心思路 #

• 给Select组件绑定ref，方便获取其DOM元素
• 监听Select的onChange事件，每次选中值更新后，动态给生成的标签元素插入编辑按钮
• 处理编辑按钮的点击逻辑，通过弹窗实现标签内容的修改，并同步更新Select的选中值
• 每次更新时清理旧的编辑按钮，避免重复渲染

完整代码示例 #

import React, { useEffect, useRef, useState } from "react";
import "antd/dist/antd.css";
import { Select, Input, Modal } from "antd";

const { Option } = Select;
const arr = ["first value", "second value", "third value"];

const App = () => {
  const selectRef = useRef(null);
  const [selectedValues, setSelectedValues] = useState([]);
  const [editModalVisible, setEditModalVisible] = useState(false);
  const [currentEditValue, setCurrentEditValue] = useState("");
  const [editIndex, setEditIndex] = useState(-1);

  // 处理Select选中值变化
  const handleSelectChange = (values) => {
    setSelectedValues(values);
  };

  // 动态给标签添加编辑按钮
  useEffect(() => {
    const selectDOM = selectRef.current;
    if (!selectDOM) return;

    // 先移除已存在的编辑按钮，防止重复添加
    const existingEditBtns = selectDOM.querySelectorAll(".ant-tag-edit-btn");
    existingEditBtns.forEach(btn => btn.remove());

    // 获取所有已生成的标签元素
    const tagElements = selectDOM.querySelectorAll(".ant-select-selection__choice");
    tagElements.forEach((tagEl, index) => {
      // 创建编辑按钮元素
      const editBtn = document.createElement("span");
      editBtn.className = "ant-tag-edit-btn";
      editBtn.innerHTML = "✏️";
      editBtn.style.marginLeft = "4px";
      editBtn.style.cursor = "pointer";
      editBtn.style.fontSize = "12px";

      // 绑定编辑点击事件，阻止事件冒泡避免触发标签关闭
      editBtn.onclick = (e) => {
        e.stopPropagation();
        setCurrentEditValue(selectedValues[index]);
        setEditIndex(index);
        setEditModalVisible(true);
      };

      // 将编辑按钮插入到关闭按钮之前
      const closeBtn = tagEl.querySelector(".ant-select-selection__choice__remove");
      tagEl.insertBefore(editBtn, closeBtn);
    });
  }, [selectedValues]);

  // 确认编辑标签内容
  const handleEditConfirm = () => {
    if (!currentEditValue.trim()) return;
    const updatedValues = [...selectedValues];
    updatedValues[editIndex] = currentEditValue;
    setSelectedValues(updatedValues);
    setEditModalVisible(false);
  };

  return (
    <>
      <Select
        ref={selectRef}
        mode="tags"
        size="large"
        placeholder="请选择或输入标签"
        style={{ width: "100%" }}
        value={selectedValues}
        onChange={handleSelectChange}
      >
        {arr?.map((el) => (
          <Option key={el} value={el}>
            {el}
          </Option>
        ))}
      </Select>

      {/* 标签编辑弹窗 */}
      <Modal
        title="编辑标签"
        visible={editModalVisible}
        onOk={handleEditConfirm}
        onCancel={() => setEditModalVisible(false)}
        okText="确认"
        cancelText="取消"
      >
        <Input
          value={currentEditValue}
          onChange={(e) => setCurrentEditValue(e.target.value)}
          placeholder="输入新的标签内容"
          autoFocus
        />
      </Modal>
    </>
  );
};

export default App;

注意事项 #

• 每次选中值更新时必须先清理旧的编辑按钮，避免同一标签下出现多个编辑按钮
• 通过e.stopPropagation()阻止点击事件冒泡，防止触发标签的关闭逻辑
• 编辑后的标签值会直接同步到Select的选中值数组，确保组件状态一致
• 可以根据需求自定义编辑按钮的样式（比如替换图标、调整颜色等）

内容的提问来源于stack exchange，提问作者someone