《PC端UI框架》Ant Design V4 中的 Modal

Modal 中包含表单，Modal 关闭后没有清空 Form 表单的值：

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

export default class extends React.Component{
  state = {
    isModalVisible: false,
    formDtata: {},
  }
  formRef = React.createRef()

  componentDidMount() {
     // 只初始加载的时候执行一次，由于 React 复用组件，再次点击并不会重新执行此生命周期函数，这也是导致 Modal 关闭后没有清空 Form 表单的值的原因
     console.log('modal componentDidMount')
  }

  showModal = () => {
    // 再次点击打开 Modal，会发现上次输入的表单中的数据仍然存在
    // 打印会发现，this.state.formDtata 中仍然保存着上次表单输入的值
    console.log(this.state.formDtata)
   
    this.setState({isModalVisible: true})
  }
  
  handleOk = async () => {
    let formData = await this.formRef.current.validateFields()
    this.setState({
      formDtata: formData,
      isModalVisible: false,
    })
  }

  render() {
    const {isModalVisible} = this.state
    const layout = {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 20,
      },
    }
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>打开弹框</Button>
        <Modal title="弹框" visible={isModalVisible}
          footer={
            <Button type="primary" onClick={this.handleOk}>确定</Button>
          }>
          <Form {...layout} ref={this.formRef}>
            <Form.Item label="姓名" name="username"><Input /></Form.Item>
            <Form.Item label="密码" name="password"><Input /></Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }
}

解决方法：

1. 关闭 Modal 时手动清空表单中的数据和 state 中保存的数据。

   handleOk = async () => {
   
       let formData = await this.formRef.current.validateFields()
       this.setState({
         formDtata: formData,
       }, () => {
         this.setState({
           isModalVisible: false,
           formDtata: {}, // 清除 this.state.formDtata 中保存的数据
         })
         this.formRef.current.resetFields() // 清除表单中的数据
       })
     }
   

2. 给 Modal 设置 destroyOnClose，关闭时销毁 Modal 里的子元素。

   //  state 中保存的数据仍然存在，需要手动清除
   <Modal destroyOnClose={true}></Modal>