如何 add/subtract 按钮点击日期？

Question

单击按钮时，我正在尝试 add/subtract 给定日期。
利用 setDate 和 getTime 我设法获得了正确的日期。

const subtract = (params) => {
    const subtracted = new Date(
      params.setTime(new Date(params).getTime() - (3600 / 60) * 60000)
    ).toLocaleTimeString("en-UK", options);
    console.log("subtracted", subtracted);
    return subtracted;
  };

如果您在 `dev tools/console` 中检查名为 `subtracted` 的值，您将看到减法是正确的。但是在 table 它仍然是旧值，它不会更新。这是代码和 [沙盒演示 link][1]

https://codesandbox.io/s/aggridsubtract-time-vqh95f

import React from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";

const options = {
  hour: "2-digit",
  minute: "2-digit",
  hour12: false
};
function App() {
  const [gridApi, setGridApi] = React.useState(null);
  const [gridColumnApi, setGridColumnApi] = React.useState(null);

  const onGridReady = (params) => {
    setGridApi(params.api);
    setGridColumnApi(params.columnApi);
  };

  const subtract = (params) => {
    const subtracted = new Date(
      params.setTime(new Date(params).getTime() - (3600 / 60) * 60000)
    ).toLocaleTimeString("en-UK", options);
    console.log("subtracted", subtracted);
    return subtracted;
  };

  var rowData = [
    {
      id: 1,
      name: "John",
      time: new Date()
    },
    {
      id: 2,
      name: "David",
      time: new Date()
    },
    {
      id: 3,
      name: "Dan",
      time: new Date()
    }
  ];

  const defaultColDef = {
    flex: 1,
    editable: true
  };

  const columnDefs = [
    {
      headerName: "Name",
      field: "name"
    },
    {
      headerName: "time",
      field: "time",
      cellRenderer: ({ value }) => (
        <div>
          <button onClick={() => subtract(value)}>-</button>
          {value.toLocaleTimeString("en-UK", options)}
          <button>+</button>
        </div>
      )
    }
  ];

  return (
    <div>
      <h1 align="center">React-App</h1>
      <div>
        <div className="ag-theme-alpine" style={{ height: "700px" }}>
          <AgGridReact
            columnDefs={columnDefs}
            rowData={rowData}
            defaultColDef={defaultColDef}
            onGridReady={onGridReady}
          ></AgGridReact>
        </div>
      </div>
    </div>
  );
}

export default App;

任何帮助将不胜感激

Answer 1

创建了子组件来管理 rowData 数组中每个对象的 date 状态。我已经更新了你的代码。使用它作为示例来改进您的代码。 (请参考link here)

如何 add/subtract 按钮点击日期？

How to add/subtract dates on button click?

javascript

reactjs

ag-grid