如何解决选择中的Antd新图标不可点击
我已从antd样式中选择了带有不同图标的样式化组件。一切正常,只是单击select内的新图标不会触发下拉菜单以打开或关闭。
<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
解决方法
我认为这是一个错误。但是与此同时,一种变通方法可能是处理是否通过图标上的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>
);
};
,
这似乎是一个错误。切换到较旧的antd版本,例如4.1.3
似乎可以解决您的错误
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。