如何移除rsuite DateRangePicker选中日期后的X取消按钮

rsuite 组件库的 DateRangePicker 日期范围选择器原生提供配置项控制清空按钮的显示，不需要额外写CSS隐藏或者加事件拦截，直接设置cleanable属性为false即可，配置后选中日期后显示的X形清空按钮会直接不渲染，从根源避免用户误点把组件值清空为null的问题。

代码示例 #

import { DateRangePicker } from 'rsuite';
import 'rsuite/dist/rsuite.min.css';

export default function DateRangeSelector() {
  return (
    <DateRangePicker
      // 核心配置：关闭清空按钮展示
      cleanable={false}
      // 其余业务属性按实际需求配置即可
      format="yyyy-MM-dd"
      onChange={(dateRange) => {
        // 该回调不会再因为点击清空按钮返回null，取值完全符合业务预期
        console.log('当前选中日期范围：', dateRange);
      }}
    />
  );
}

补充说明 #

• 该方案兼容rsuite v4、v5全量版本，是官方推荐的标准实现方式，比手动写样式覆盖隐藏按钮、拦截点击事件的方案更稳定，不会出现组件版本升级后样式失效、事件拦截不生效的问题。
• 如果后续业务需要保留清空能力，只是要拦截误清空操作，不需要设置cleanable={false}，可以在onChange回调里判断传入值是否为null，做二次确认或者直接拦截null值的赋值即可。

内容的提问来源于stack exchange，提问作者SUSHANT SHETTY