Antd Calendar点击日期内按钮时阻止触发onSelect问题

方法1：阻止按钮的事件冒泡 #

点击按钮时，通过e.stopPropagation()阻止事件向上冒泡到日历单元格，从源头切断事件传递，避免触发Calendar的onSelect回调。

代码示例：

import { Calendar } from 'antd';

const App = () => {
  const handleDateSelect = (value) => {
    console.log('选择了日期:', value);
  };

  const dateRender = (current) => {
    return (
      <div>
        {current.date()}
        <button 
          onClick={(e) => {
            e.stopPropagation(); // 阻止事件冒泡到父级单元格
            console.log('点击了按钮');
          }}
          style={{ marginLeft: 8 }}
        >
          操作
        </button>
      </div>
    );
  };

  return (
    <Calendar 
      onSelect={handleDateSelect} 
      dateRender={dateRender} 
    />
  );
};

export default App;

方法2：在onSelect中判断触发源 #

如果无法修改按钮的点击逻辑，可以在onSelect回调里通过事件对象，判断触发事件的目标是否为按钮（或按钮的子元素），若是则跳过日期选择逻辑。

代码示例：

import { Calendar } from 'antd';

const App = () => {
  const handleDateSelect = (value, e) => {
    // 检查点击目标是否是按钮或按钮的后代元素
    const isButtonTriggered = e.target.closest('button') !== null;
    if (isButtonTriggered) return;

    console.log('选择了日期:', value);
  };

  const dateRender = (current) => {
    return (
      <div>
        {current.date()}
        <button 
          onClick={() => console.log('点击了按钮')}
          style={{ marginLeft: 8 }}
        >
          操作
        </button>
      </div>
    );
  };

  return (
    <Calendar 
      onSelect={handleDateSelect} 
      dateRender={dateRender} 
    />
  );
};

export default App;

说明 #

• 方法1更直接，性能更优，推荐优先使用。
• 方法2适合无法修改按钮点击逻辑的场景，通过事件委托思路判断触发源。

内容的提问来源于stack exchange，提问作者Avtandil Zenaishvili