reactjs - 检查材料表行是否仍处于编辑模式

Question

我在材料UI 步进器中使用材料表，即使表格仍处于编辑模式，用户也倾向于单击“下一步”按钮。这会导致数据丢失。

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

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} />;
            },
        }}
        ...
    />