#reactjs #ag-grid #ag-grid-react
#reactjs #ag-grid #ag-grid-реагировать
Вопрос:
Я создаю некоторые пользовательские функции встроенного редактирования и пытаюсь сбросить данные, когда пользователь нажимает «Отмена» после внесения изменений в определенные столбцы. Я использую 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
Единственное, что я могу придумать, это повторно извлечь данные из базы данных при отмене, но я бы предпочел этого не делать.
Ответ №1:
Вам не нужно 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>
</>
);
}
Живая демонстрация
Комментарии:
1. Спасибо за ответ! Это определенно намного чище, чем мой метод, но у меня есть один вопрос. Будет ли это работать для редактирования нескольких столбцов в строке одновременно?
2. Вы можете взглянуть на полное редактирование строк @aus_10