antd中的Select组件点击allowClear不生效

问题描述：

当使用Select组件的时候，同时使用value和allowClear属性，会导致点击allowClear不生效

解决方法：

可以在Select组件外面包一层div，通过监听点击allowClear图标事件来手动清除数据

代码实现

<div
  onClickCapture={e => {
  const isClickedClear = [e.target, e.target?.parentElement].some(
        node => node?.getAttribute('data-icon') === 'close-circle'
        );
     if (isClickedClear) {
       // 清除
       console.log('clear')
        e.stopPropagation();
    }
}}
 >
 <Select
      value={value || ''}
      allowClear={true}
      onChange={(value: any) => {
        console.log('value==', value)
         }}
      // .......
  />
</div>

onClickCapture也可以写成：

<div
  onClickCapture={e => {
  const isClickedClear = e.target?.parentElement?.getAttribute('data-icon') === 'close-circle');
     if (isClickedClear) {
       // 清除
       console.log('clear')
        e.stopPropagation();
    }
}}
>
//.......
<div/>