选择中的antd新图标不可点击答案

【问题标题】：Antd new icon in select is not clickable选择中的antd新图标不可点击
【发布时间】：2020-12-10 13:38:08
【问题描述】：

我有 Select from antd styled with styled components with different icon。一切正常，除了单击选择内的新图标不会触发下拉菜单打开或关闭。

   <Styled.SortSelect
      size={size ? size : 'large'}
      defaultValue={defaultValue}
      suffixIcon={<Styled.Icon />}
      getPopupContainer={trigger => {
        return trigger;
      }}
    >
      {options.map((option: string) => {
        return (
          <Styled.SortOption className="custom-option" data-testid="sort-option" key={option} value={option}>
            {option}
          </Styled.SortOption>
        );
      })}
    </Styled.SortSelect>

简单演示

https://codesandbox.io/s/broken-arrow-click-nfpc7?file=/src/index.tsx

【问题讨论】：

请分享一个最小的可重现示例，如 CodeSandbox 或 Stackblitz。
@zerocewl 谢谢你的建议，我已经添加了例子codesandbox.io/s/broken-arrow-click-nfpc7?file=/src/index.tsx

标签： reactjs antd styled-components

【解决方案1】：

我认为这是一个错误。但与此同时，一种解决方法可能是通过图标上的onClick 自行处理选择是否打开，如下所示：

export const SortSelect = ({ defaultValue, size, options }: Props) => {
  const [open, setOpen] = useState(false);
  return (
    <Styled.SortSelect
      size={size ? size : "large"}
      defaultValue={defaultValue}
      suffixIcon={<Styled.Icon onClick={() => setOpen(!open)} />}
      open={open}
      getPopupContainer={trigger => {
        return trigger;
      }}
    >
      {options.map((option: string) => {
        return (
          <Styled.SortOption
            className="custom-option"
            data-testid="sort-option"
            key={option}
            value={option}
          >
            {option}
          </Styled.SortOption>
        );
      })}
    </Styled.SortSelect>
  );
};

【讨论】：

【解决方案2】：

这似乎是一个错误。切换到旧版本的 antd 例如4.1.3 似乎解决了你的错误

【讨论】：