如何防止antd多选变高/如何自定义多选标签？答案

【问题标题】：How to prevent antd multiselect from growing in height / how to customize multiselect label?如何防止antd多选变高/如何自定义多选标签？
【发布时间】：2022-07-01 04:12:31
【问题描述】：

如果我将 antd <Select/> maxTagTextLength 设置为像 4 这样的小东西，它可以工作，但是如果选择了多个项目，有没有办法让它只显示 2+ items，所以它总是保持打开状态一条线？如何自定义选定的标签标签，使其仅显示一个标签并显示自定义内容？我希望这两个输入在选择多个项目时具有相同的高度。理想情况下，第一个输入会显示“2 个城市已选择”，第二个输入会显示“2 个值已选择”。

【问题讨论】：

标签： reactjs antd

【解决方案1】：

您可以在组件的状态下管理maxTagCount

  const [count, setCount] = useState(0);

  const maxTagCount = count > 1 ? 0 : 1;

  const handleChange = (value) => {
    setCount(value.length);
  };

  return (
    <Select
      onChange={handleChange}
      mode="multiple"
      maxTagCount={maxTagCount}
      options={options}
    />
  );
};

codesandbox.io

【讨论】：