检查材料表行是不是仍处于编辑模式

Posted 2023-02-22

【中文标题】检查材料表行是不是仍处于编辑模式

【英文标题】：Check if a material-table row is still in edit mode检查材料表行是否仍处于编辑模式

【发布时间】：2020-01-28 09:26:27

【问题描述】：

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

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

【参考方案1】：

虽然没有直接公开的方法可以告诉您表格是否为可编辑模式（我认为应该有），但您仍然可以找到它，但您将不得不对其内部进行一些处理。首先，您需要获取表格的 ref（find tableRef property），然后可以帮助您的属性是表格状态下的 lastEditingRow。

所以，tableRef 将是：tableRef.current.state.lastEditingRow。对于处于编辑模式的表格，lastEditingRow 将设置为描述正在编辑的行的对象，如果表格未处于编辑模式，则 undefined。

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

【讨论】：

非常感谢有关 tableRef 道具的提示。它非常适合我:) 我认为您还应该测试tableRef.current.state.showAddRow 是否为假。否则，用户可能会创建一个新行，填写所有详细信息，单击下一步而不保存，数据就消失了。

【参考方案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 />;
            ,
        
        ...
    />