自定义MobileDatePicker日期按钮后onAccept回调未触发求助

当你通过slots自定义MobileDatePicker的日期确认按钮时，必须保留并调用组件传入的内置onClick属性，否则会中断MUI内部的回调触发流程，导致onAccept无法执行。

问题原因 #

自定义按钮时，若完全替换原组件按钮但未绑定MUI内置的点击处理逻辑，就会导致回调链断裂——原按钮的onClick中包含了触发onAccept回调的核心逻辑，忽略这个属性自然无法触发目标回调。

解决方案 #

在自定义按钮组件中，接收并调用传入的onClick props，示例如下：

// 自定义确认按钮组件
const CustomAcceptButton = (props) => {
  return (
    <Button 
      variant="contained" 
      onClick={props.onClick} // 必须调用内置的onClick以保留原逻辑
      sx={{ backgroundColor: 'green' }}
    >
      自定义确认
    </Button>
  );
};

// 在MobileDatePicker中使用自定义按钮
<MobileDatePicker
  slots={{ acceptButton: CustomAcceptButton }}
  onAccept={(date) => console.log('日期确认:', date)}
  // 其他配置项...
/>

这种方式既保留了你对按钮样式、文本的定制需求，又能正常触发onAccept回调。

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