Блог

Я создаю некоторые пользовательские функции встроенного редактирования и пытаюсь сбросить данные, когда пользователь нажимает «Отмена» после внесения изменений в определенные столбцы. Я использую cellRenderers для этого, поэтому у меня нет доступа к параметрам редактирования, которые были cellEditor бы.

В настоящее время я сохраняю данные конкретной строки в состоянии реакции originalRowInfo при нажатии на эту строку:

 const moreInfoClick = (event, toggleMoreInfo, rowData) => {
  event.persist();
  setMoreInfoLocation({ x: event.clientX, y: event.clientY });
  setRowInfo(rowData);
  setOriginalRowInfo({ ...rowData });
  toggleMoreInfo(true);
};
  

Я получаю rowData через params.data, когда я нажимаю на строку

Причина, по которой я не могу просто использовать состояние rowInfo, заключается в том, что оно изменяется ag-grid всякий раз, когда я редактирую столбец. Но использование {...rowData} , похоже, исправляет это.

Моя единственная проблема сейчас заключается в том, что одно из значений моего столбца — это массив с объектами внутри, и когда я редактирую этот столбец, он originalRowInfo также изменяется внутри. Я бы предположил, что это как-то связано со ссылками на объекты.

Столбец выглядит примерно так:

 [
  {position: 1, heat_num: 100},
  {position: 2, heat_num: 200}
]
  

И что на самом деле редактируется, так это heat_num

Единственное, что я могу придумать, это повторно извлечь данные из базы данных при отмене, но я бы предпочел этого не делать.

Вам не нужно originalRowInfo возвращаться к исходному состоянию, если пользователь отменяет редактирование, но вы можете сделать наоборот: сохранить новое значение inputValue как временное состояние, когда пользователь редактирует и:

• Если пользователь отправляет результат: вызовите ICellRendererParams.setValue(inputValue) фиксацию результата.
• В противном случае, если пользователь прервал: просто отбросьте результат, сбросив inputValue значение ICellRendererParams.value , равное исходному.

 function EditableCellRenderer(params: ICellRendererParams) {
  const [editable, setEditable] = React.useState(false);
  const [originalData] = React.useState(params.value);
  const [inputValue, setInputValue] = React.useState(params.value);
  const inputRef = React.useRef(null);
  const onEdit = () => {
    setEditable(true);
    setTimeout(() => {
      inputRef.current?.focus();
    });
  };
  const onCancel = () => {
    setInputValue(originalData);
    setEditable(false);
  };
  const onSubmit = () => {
    params.setValue(inputValue);
    setEditable(false);
  };

  return (
    <>
      <input
        ref={inputRef}
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        disabled={!editable}
      />
      <button onClick={onEdit}>E</button>
      <button onClick={onCancel}>X</button>
      <button onClick={onSubmit}>S</button>
    </>
  );
}
  

Живая демонстрация