Javascript 如何在ant design中更改 Select 组件标签

作为antd版本3.3.0的临时解决方案，您可以向所有选项添加自定义图标，并在这些图标出现在 Select 下拉列表中时将其隐藏，如下所示:

import React from "react";
import "antd/dist/antd.css";
import { Select } from "antd";
import { EditOutlined } from "@ant-design/icons";
import "./demo.css";
const { Option } = Select;
const arr = ["first value", "second value", "third value"];

const App = () => {
  const handleEditClicked = (e, el) => {
    e.stopPropagation();
    e.preventDefault();

    console.log(el);
  };

  return (
    <>
      <Select
        mode="tags"
        size={"large"}
        placeholder="Please select"
        style={{
          width: "100%"
        }}
      >
        {arr?.map((el) => (
          <Option key={el} value={el}>
            <EditOutlined
              className="customEditIcon"
              onClick={(e) => handleEditClicked(e, el)}
            />
            {el}
          </Option>
        ))}
      </Select>
    </>
  );
};

export default App;

下拉列表中隐藏图标的相关css如下:

.customEditIcon.anticon-edit:before {
  display: none;
}

.ant-select-dropdown .customEditIcon {
  display: none;
}

您可以在this forked沙箱中查看此变通解决方案的实际工作示例.