Arco Design 的 Modal 关闭后怎么清除表单数据？

UX-涵菲提问于 2026-03-04 11:18:24 阅读 7

组件

我在用 Arco Design 的 Modal 做一个编辑表单，但每次关闭 Modal 再打开，表单里还保留着上次的值，明明我已经把 visible 设为 false 了。是不是要手动重置表单？

我试过在 onOk 或 onCancel 里调用 form.resetFields()，但有时候还是残留数据，特别是点右上角 × 关闭的时候。下面是我现在的代码：

const handleCancel = () => {
  setVisible(false);
  form.resetFields(); // 这行好像没生效？
};

const handleOk = () => {
  form.validate().then(() => {
    // 提交逻辑
    setVisible(false);
    form.resetFields();
  });
};

Modal模态框

我来解答赞 1 收藏

反馈

1 条解答

诸葛莉霞 Lv1

这个问题在 Arco 里太常见了，坑过不少人。核心原因是你虽然把 visible 设成 false 了，但 Modal 组件默认并没有销毁，里面的表单状态一直都在 DOM 里挂着。最简单的办法就是把 Modal 的 unmountOnClose 属性设为 true。这样 Modal 关闭的时候，里面的表单组件会直接从 DOM 移除，下次打开自然就是新的了，根本不用操心重置的事。

如果你不想卸载组件（比如为了性能），那就别在 onCancel 里重置，用 afterClose 回调。这个回调是在 Modal 动画结束、真正隐藏后才触发的，这时候重置才稳。代码大概是这样，你可以试试看：

import React, { useState } from 'react';

import { Modal, Form, Input, Button } from '@arco-design/web-react';



function App() {

  const [visible, setVisible] = useState(false);

  const [form] = Form.useForm();



  const handleOk = () => {

    form.validate().then(() => {

      // 提交逻辑...

      setVisible(false);

    });

  };



  // 方案一：卸载组件（推荐）

  // 直接给 Modal 加上 unmountOnClose={true}

  

  // 方案二：使用 afterClose 回调

  const handleAfterClose = () => {

    form.resetFields();

  };



  return (

    

      

      

      
        title="编辑"

        visible={visible}

        onOk={handleOk}

        onCancel={() => setVisible(false)}

        // 核心修改在这里：

        unmountOnClose={true} 

        // 或者如果你不想卸载，用这个：

        // afterClose={handleAfterClose}

      >

        

          

            

          

        


      

    


  );

}

加了这个属性，或者用 afterClose，基本就能解决残留问题了，特别是点右上角那个 X 的时候，这两个方案都能覆盖到。

2026-03-04 14:31