编写React-Data-Grid自定义编辑器涉及以下问题和解决方法:
创建自定义编辑器组件:
import React, { useState } from 'react';
const CustomEditor = ({ value, onCommit, onClose }) => {
const [inputValue, setInputValue] = useState(value);
const handleInputChange = (e) => {
setInputValue(e.target.value);
};
const handleCommit = () => {
onCommit(inputValue);
onClose();
};
return (
);
};
export default CustomEditor;
使用自定义编辑器组件:
EditorContainer
组件包装自定义编辑器。onCommit
和onClose
回调函数与表格进行交互。import ReactDataGrid from 'react-data-grid';
import { Editors, Formatters } from 'react-data-grid-addons';
import CustomEditor from './CustomEditor';
const { Data: { Selectors } } = require('react-data-grid-addons');
const { AutoComplete: AutoCompleteEditor } = Editors;
const columns = [
// other columns
{
key: 'custom',
name: 'Custom',
editor: ,
formatter: Formatters.editableFormatter,
width: 100
}
];
const rows = [
// data rows
];
const EditorContainer = ({ editorComponent, rowIdx, column, value, onCommit, onClose }) => (
{React.cloneElement(editorComponent, { value, onCommit, onClose })}
);
const handleGridRowsUpdated = ({ fromRow, toRow, updated }) => {
// handle grid row updates
};
const CustomGrid = () => {
return (
rows[i]}
rowsCount={rows.length}
onGridRowsUpdated={handleGridRowsUpdated}
enableCellSelect={true}
/>
);
};
export default CustomGrid;
通过以上方法,你可以编写一个自定义编辑器来在React-Data-Grid中使用。在CustomEditor
组件中,你可以定义任何你需要的交互逻辑,并在需要时调用onCommit
和onClose
函数与表格进行交互。在CustomGrid
组件中,你可以将自定义编辑器应用到特定的列中,并通过handleGridRowsUpdated
函数处理表格行的更新。
下一篇:编写React函数式组件