时间戳

首页 > 解决方案 > 在 ReactJs 中单击时设置活动单元格

reactjs - 在 ReactJs 中单击时设置活动单元格

问题描述

我有这个组件：

const arr = [];

const test = (date) => {
  arr.push(date);
};

ReactDOM.render(
  <Space direction="vertical" size={12}>
    <DatePicker
      onChange={test}
      open={true}
      showNow={false}
      dateRender={(current) => {
        const style = {};
        if (arr.includes(current)) {
          style.border = "1px solid red";
          style.borderRadius = "50%";
        }
        return (
          <div className="ant-picker-cell-inner" style={style}>
            {current.date()}
          </div>
        );
      }}
    />
  </Space>,
  document.getElementById("container")
);

接下来是这个想法：当我单击特定日期时，它应该应用下一个样式：

if (arr.includes(current)) {
  style.border = "1px solid red";
  style.borderRadius = "50%";
}

我现在不知道为什么，但它不起作用。我希望何时单击日期以应用这些样式，以及何时单击同一单元格以取消选择样式，但我的条件不起作用。谁能帮忙？

链接到代码沙盒。

标签： reactjs

解决方案

onChange事件回调将时刻对象作为参数返回，因此arr.includes(current)将不起作用。您应该将 moment 对象转换为某种可以比较的类型。

format()为了快速解决方法，您可以将其转换为带有函数的ISO 字符串。

同样要实现取消选择，您需要检查单击的日期是否已添加到数组中。

const test = (date) => {
  const str = date.format();
  if (arr.includes(str)) {
    arr.splice(arr.indexOf(str), 1);
  } else {
    arr.push(str);
  }
};

if (arr.includes(current.format())) {

推荐阅读