Antd pro-components ModalForm 中使用 EditableProTable 關閉 modal 後不會清除 table 資料的解法

7 個月前

內容目錄 隱藏

網上搜到的解法大多是說要設置 ModalForm 的 modalProps.destroyOnClose 為 true，但如果跟我一樣設置後 table 資料也不會在關閉 modal 後重置的話可以嘗試和我一樣的解法。

import React, { useState } from 'react'
import {
  EditableProTable,
  ModalForm,
  ProForm,
  ProFormDatePicker,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components'

export const Component = ({ modal }) => {
  const [form] = Form.useForm()
  const [tableForm] = Form.useForm()
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([])

  return (
    <ModalForm 
      {...}
      open={modal}
      modalProps={{ destroyOnClose: true }}
    >
      <ProForm.Item
        name="list"
        trigger="onValuesChange"
      >
        <EditableProTable {...} />
      </ProForm.Item>
    </ModalForm>
  )
}

解決方法

使用 useEffect 在 modal 關閉後 reset 所有欄位並且將 editableRowKeys 清空

import React, { useEffect, useState } from 'react'
import {
  EditableProTable,
  ModalForm,
  ProForm,
  ProFormDatePicker,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components'

export const Component = ({ modal }) => {
  const [form] = Form.useForm()
  const [tableForm] = Form.useForm()
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([])
  
  useEffect(() => {
    if (!modal) {
      setEditableRowKeys([])
      form.resetFields()
    }
  }, [modal, form])

  return (
    <ModalForm 
      {...}
      open={modal}
      modalProps={{ destroyOnClose: true }}
    >
      <ProForm.Item
        name="list"
        trigger="onValuesChange"
      >
        <EditableProTable {...} />
      </ProForm.Item>
    </ModalForm>
  )
}

如果發現還是沒有清除，可能是 EditableProTables 的 editable.form 引起的，可以檢查一下

解決方法

相關文章