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

Question

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

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

Answer 1

虽然没有直接公开的方法可以告诉您表格是否是可编辑模式(我认为应该有(，但您仍然可以找到它，但您将不得不弄乱它的内部结构。首先，您需要获取表的 ref(查找 tableRef 属性(，然后可以帮助您的属性lastEditingRow表的状态。

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

代码沙盒，为您提供示例：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} />;
},
}}
...
/>