Reactjs 无限日历删除选择处理程序

我使用无限日历

如果选择或取消选择日期，此代码将显示相同的警报。 如果我不选择日期，我需要显示不同的警报

---

如果有任何帮助，我将不胜感激。

事实上，我想通过查看

这里有一个方法来做你想做的事

let oldDate = null;
function App() {
  return (
    <InfiniteCalendar
      interpolateSelection={(date) => {
        if (oldDate && oldDate.toString() === date.toString()) {
          oldDate = null;
          alert('You just de-selected: ' + format(date, 'ddd, MMM Do YYYY'))
          return 
          // or jump to today on deslect 
          // return Date.now();
        }
        oldDate = date;
        alert('You selected: ' + format(date, 'ddd, MMM Do YYYY'))
        return date;
      }}
    />
  );
}

让oldDate=null；
函数App（）{
返回(
{
if（oldDate&&oldDate.toString（）==date.toString（））{
oldDate=null；
警报（'您刚刚取消选择：'+格式（日期'ddd，MMM Do YYYY'））
返回
//或者直接跳到今天
//返回日期。现在（）；
}
oldDate=日期；
警报（'您选择：'+格式（日期'ddd，MMM Do yyy'））
返回日期；
}}
/>
);
}

你可以用react useState做得更干净。我没有使用它，因为我想它是不需要的，但你可以添加它，如果你想，只是确保防止额外的重新渲染

如果要以表示的方式对多个组件使用以下代码，则必须在“组件卸载”中重置oldDate

您还可以使用useRef，它既可以防止重新渲染，又可以是被动的，或者与js本身相同

const oldDate = { current: null } // js version with nearly all same logic

// useRef version
function App() {
  const oldDate = useRef(null)
  return (
    <InfiniteCalendar
      interpolateSelection={(date) => {
        if (oldDate.current && oldDate.current.toString() === date.toString()) {
          oldDate.current = null;
          alert('You just de-selected: ' + format(date, 'ddd, MMM Do YYYY'))
          return 
        }
        oldDate.current = date;
        alert('You selected: ' + format(date, 'ddd, MMM Do YYYY'))
        return date;
      }}
    />
  );
}

constOldDate={current:null}//js版本，具有几乎所有相同的逻辑
//useRef版本
函数App（）{
const oldDate=useRef（空）
返回(
{
if（oldDate.current&&oldDate.current.toString（）==date.toString（））{
oldDate.current=null；
警报（'您刚刚取消选择：'+格式（日期'ddd，MMM Do YYYY'））
返回
}
oldDate.current=日期；
警报（'您选择：'+格式（日期'ddd，MMM Do yyy'））
返回日期；
}}
/>
);
}

谢谢。它几乎成功了，但如果我选择了日期，他们选择了另一个日期-我收到消息“You just de selected:”，但选择了我的第一个更改日期。这是我需要在单击日期后在服务器上发布请求，如果未选中日期，则删除请求。Post请求正在发送完成，但无法删除请求，因为取消选择事件再次启动Post请求。抱歉我的英语）它的大问题-找到好的乘法数据选择器，它可以从服务器上获取日期数组、发布日期和删除日期。å这个日历可以获取和发布日期，但是删除请求-它的问题（我修复了您提到的@1 Material UI日期选择器处理本地化和许多其他内容本身的问题：）我非常尊敬你！

const oldDate = { current: null } // js version with nearly all same logic

// useRef version
function App() {
  const oldDate = useRef(null)
  return (
    <InfiniteCalendar
      interpolateSelection={(date) => {
        if (oldDate.current && oldDate.current.toString() === date.toString()) {
          oldDate.current = null;
          alert('You just de-selected: ' + format(date, 'ddd, MMM Do YYYY'))
          return 
        }
        oldDate.current = date;
        alert('You selected: ' + format(date, 'ddd, MMM Do YYYY'))
        return date;
      }}
    />
  );
}