ReactJS中点击日期单元格设置选中样式失效问题求助

我来帮你搞定这个问题！你的代码里判断逻辑不生效的核心原因是Moment对象的引用比较——AntD DatePicker的dateRender里的current是每次渲染生成的新Moment实例，而你数组里存的是onChange传来的另一个Moment对象，它们的引用不同，所以arr.includes(current)永远返回false。

下面是修复后的完整代码，我会一步步解释修改点：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, Space } from 'antd';
import 'antd/dist/antd.css';

const App = () => {
  // 用状态存储选中的日期（存ISO字符串，避免对象引用问题）
  const [selectedDates, setSelectedDates] = useState([]);

  // 处理单元格点击事件：切换日期的选中状态
  const handleCellClick = (current) => {
    const dateStr = current.toISOString();
    setSelectedDates(prev => {
      if (prev.includes(dateStr)) {
        // 已选中，移除
        return prev.filter(item => item !== dateStr);
      } else {
        // 未选中，添加
        return [...prev, dateStr];
      }
    });
  };

  return (
    <Space direction="vertical" size={12}>
      <DatePicker
        open={true}
        showNow={false}
        dateRender={(current) => {
          const dateStr = current.toISOString();
          const isSelected = selectedDates.includes(dateStr);
          const style = isSelected ? {
            border: "1px solid red",
            borderRadius: "50%",
            cursor: 'pointer' // 加上光标提示，提升交互体验
          } : {};

          return (
            <div 
              className="ant-picker-cell-inner" 
              style={style}
              onClick={() => handleCellClick(current)} // 添加点击事件
            >
              {current.date()}
            </div>
          );
        }}
      />
    </Space>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));

关键修改点说明： #

• 用状态管理选中日期：把原来的全局数组arr换成React的useState状态selectedDates，这样状态变化会触发组件重新渲染，实时更新样式。
• 存储日期字符串而非对象：将Moment对象转成ISO字符串（current.toISOString()）存储和比较，彻底避免对象引用不同导致的判断失败问题。
• 添加单元格点击事件：直接在dateRender的div上绑定onClick，手动处理选中状态的切换——毕竟默认的onChange是选中日期的回调，和我们需要的"点击任意单元格切换样式"逻辑不匹配。
• 切换状态的逻辑：在handleCellClick里，判断当前日期是否已在选中列表中，存在则移除，不存在则添加，完美实现点击切换的效果。

这样修改后，点击任意日期单元格就能正确添加/移除红色边框圆角样式啦！

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