Modal获取Form数据简单demo

最新推荐文章于 2024-05-14 14:35:02 发布

ludangege_9199

最新推荐文章于 2024-05-14 14:35:02 发布

阅读量3.2k

点赞数 4

分类专栏： React 文章标签： reactjs es6

本文链接：https://blog.csdn.net/nino617/article/details/109640156

版权

本文提供了一个React+Antd创建的Modal内嵌表单的示例，详细介绍了如何在Modal中使用Form，包括React.createRef()的使用、React中this的指向与绑定方法、Form数据验证及Modal的确定按钮与表单提交的关联。

摘要由CSDN通过智能技术生成

前言

使用react+antd+umi新建modal内嵌表单demo。

一、效果展示

完成效果如下图，点击Open Modal，弹出Modal框，Modal框内嵌Form表单，表单提交时控制台获取到表单数据。

二、完整代码及概念总结

1.完整代码

代码如下：

//引入库
import React from 'react';
import {
   Modal, Button, Form, Input, Select, Checkbox} from 'antd';

const layout = {
   
  labelCol: {
   span: 8},
  wrapperCol: {
   span: 16},
};
const tailLayout = {
   
  wrapperCol: {
   offset: 8, span: 16},
};

class Demo extends React.Component {
   
// 为Form建立引用
  form = React.createRef();
// 在state内存储modal的visible值
  state = {
   visible: false};
// 点击submit，form校验成功后获取到form表单的值
  onFinish = () => {
   
    this.form.current.validateFields().then(value => console.log("value :",value));
  };
  render() {
   
    return (
      <>
        <Button type="primary" onClick={
   () => this.setState({
   visible: true})}>
          Open Modal
        </Button>
        <Modal
          title="Basic Modal"
          visible={
   this.state.visible}
          onOk={
   (e) => {
   
            console.log(e);
            this.setState({
   
              visible: false,
            });
          }}
          onCancel={
   
            (e) => {
   
              console.log(e);
              this.setState({
   visible: false,});
            }