如何在 ant 设计中更改 select 组件标签

Question

大家好，我有以下代码。

我正在尝试做以下事情。

当用户从下拉列表中选择一项时，它会出现在 select 中，并带有关闭标签。

所以我需要以某种方式自定义和添加除了关闭图标之外还有编辑按钮。 我怎样才能做到这一点？

    import React from "react";
    import "antd/dist/antd.css";
    import { Select } from "and";

    const { Option } = Select;
    const arr = ["first value", "second value", "third value"];
    const App = () => {
      return (
        <>
          <Select
            mode="tags"
            size={"large"}
            placeholder="Please select"
            style={{
              width: "100%"
            }}
          >
            {arr?.map((el) => (
              <Option key={el} value={el}>
                {el}
              </Option>
            ))}
          </Select>
        </>
      );
    };

    export default App;

PS 不幸的是，我使用的是 antd 版本3.xx ，它不支持tagRender 。 而且没有办法升级到最新版本。

请帮我解决这个问题。

Answer 1

作为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;
}

您可以查看这个分叉的沙箱，以获取此变通解决方案的实时工作示例。