Question

我在material-table中使用了material-ui Stepper，即使表格仍处于编辑模式，用户也倾向于单击“下一步”按钮。这会导致数据丢失。

当用户单击“下一步”按钮时，我可以某种方式访问表信息以检查表/行是否仍处于编辑模式吗？

Answer 1

虽然没有直接公开的方法可以告诉您该表是否为可编辑模式（我认为应该如此），但是您仍然可以找到它，但是您必须对其内部进行一些修改。首先，您将需要获取表的引用（查找tableRef属性），然后将为您提供帮助的属性是lastEditingRow处于表状态。

因此，假设tableRef为：tableRef.current.state.lastEditingRow。对于处于编辑模式的表，lastEditingRow将被设置为描述正在编辑的行的对象，如果表未处于编辑模式，则将undefined被设置为一个对象。

带有示例的CodeSandbox：https://codesandbox.io/s/fancy-waterfall-lg2ri

Answer 2

您可以使用“useRef 回调”并设置状态挂钩，例如：

// Create a state
const [isTableIsEditMode, setIsTableIsEditMode] = useState(false);
// Create a callback
const editRowRef = useCallback((editRow: React.ReactElement<any>) => setIsTableIsEditMode(!!editRow), []);
// Use the call back as a ref in your table for the Edit Row
// the ref is null if the table is not in edit mode
return <MaterialTable
        components={{
            ...
            EditRow: (props) => {
                return <MTableEditRow {...props} ref={editRowRef} />;
            },
        }}
        ...
    />

检查物料表行是否仍处于编辑模式

2 个答案: