Ant Design 抽屉组件：为何销毁不清除表单数据？

2023-10-10 18:21:46

问题

在使用 Ant Design 抽屉组件时，如果设置了 destroyOnClose 属性，则在关闭抽屉组件时，组件及其子组件都会被销毁。然而，在某些情况下，Form 组件中的数据可能不会被清除。这可能会导致数据泄露或其他问题。

原因分析

这个问题的原因在于，Ant Design 的 Form 组件使用受控模式来管理表单数据。这意味着，表单组件的父组件负责管理表单数据，并将其传递给 Form 组件。当 Form 组件被销毁时，父组件无法再管理表单数据，导致表单数据无法被清除。

解决方案

要解决这个问题，有以下几种方法：

使用非受控模式来管理表单数据。在非受控模式下，表单组件本身负责管理表单数据。当表单组件被销毁时，表单数据也将被清除。
在销毁 Form 组件之前，手动清除表单数据。这可以通过调用 Form 组件的 resetFields() 方法来实现。
使用 Ant Design 的 Form.create() 方法来创建 Form 组件。Form.create() 方法会自动将表单数据绑定到父组件。当 Form 组件被销毁时，父组件的数据也会被清除。

示例代码

以下是一个使用 Form.create() 方法来创建 Form 组件的示例代码：

import React from 'react';
import { Form, Input, Button } from 'antd';

const MyForm = Form.create()(class extends React.Component {
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form>
        <Form.Item label="姓名">
          {getFieldDecorator('name', {
            rules: [{ required: true, message: '请输入您的姓名！' }],
          })(<Input />)}
        </Form.Item>
        <Form.Item label="年龄">
          {getFieldDecorator('age', {
            rules: [{ required: true, message: '请输入您的年龄！' }],
          })(<Input />)}
        </Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form>
    );
  }
});

export default MyForm;