如何更新 ag-grid 日期编辑器的值

Question

我已经为我的实现创建了一个codesandbox。 https://codesandbox.io/s/ag-grid-date-2-0y2zb

我不太明白更改日期后如何在ag-grid中设置值。

查看示例

import React, {
  forwardRef,
  useImperativeHandle,
  useState,
  useRef
} from "react";

// https://www.ag-grid.com/react-grid/cell-editing/
// https://www.ag-grid.com/react-grid/component-date/

export const DateEditor = forwardRef((props, ref) => {
  console.log("pnload = props = ", props.value);
  const [date, setDate] = useState(props.value);
  const refInput = useRef();

  const onDateChanged = (selectedDates) => {
    console.log("onDateChanged setDate = ", selectedDates.target.value);
    setDate(selectedDates.target.value);
    // updateAndNotifyAgGrid(selectedDates[0]);
  };

  useImperativeHandle(ref, () => ({
    // *********************************************************************************
    //          METHODS REQUIRED BY AG-GRID
    // *********************************************************************************
    getDate: () => {
      console.log("getDate()", date);
      return date;
    },
    setDate: (dt) => {
      console.log(
        "useImperative - setDate() - THIS IS NOT GETTING CALLED!!",
        dt
      );
      setDate(dt);
    },
    isCancelAfterEnd: () => {
      return !date;
    }
  }));

  // inlining styles to make simpler the component
  return (
    <div className="ag-custom-component-popup">
      <input
        type="date"
        ref={refInput}
        data-input
        style={{ width: "100%" }}
        onChange={onDateChanged}
      />
    </div>
  );
});

DateEditor.displayName = "DateEditor";

Answer 1

使用 getValue() 方法，每当 单元格编辑停止时 和它 returns the newValue on cell。

 useImperativeHandle(ref, () => ({
    getValue: () => {
      return date;
    },
  }))

如何更新 ag-grid 日期编辑器的值

How to update the value of ag-grid date editor

reactjs

ag-grid