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

最新推荐文章于 2024-04-22 09:43:31 发布

原创最新推荐文章于 2024-04-22 09:43:31 发布 · 456 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#UI 框架

UI 库专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用 Ant Design 的 Modal 组件时遇到的问题：Modal 关闭后 Form 表单数据未被清空。文章详细解释了原因，并提供了两种解决方案：一是手动清空表单数据和状态数据；二是利用 Modal 的 destroyOnClose 属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
    )
  }
}

解决方法：

关闭 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() // 清除表单中的数据
    })
  }

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

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