【AntDesignPro】Ant Design Pro学习记录—ModalForm的使用（二）

CrazyPanda发表于：2023-11-28 21:28:06浏览：1178次TAG：

一、ModalForm高度设置

二、ModalForm点击阴影背景，不隐藏弹框

三、ProFormSelect联动

四、ProFormText关联赋值

一、ModalForm高度设置

在modalProps中设置bodyStyle:{height:500,overflowY:'scroll'}

效果如下：

二、ModalForm点击阴影背景，不隐藏弹框

同样在modalProps里面，配置maskClosable: false,就可以实现点击弹框外阴影，不隐藏弹框

<ModalForm
        title="编辑公司"
        width="600px"
        visible={updateModalVisible}
        onVisibleChange={setUpdateModalVisible}
        onFinish={async (value) => {          
        const success = await modify(value as API.CompanyItem);          
        if (success) {            
            setUpdateModalVisible(false);            
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
        modalProps={{          
            destroyOnClose: true,          
            maskClosable: false,          
            bodyStyle: { maxHeight: 500, overflowY: 'auto' },
        }}
      >

三、ProFormSelect联动

在ProFormSelect中，使用dependencies={['department_id']}，其中department_id是需要的其他控件的值，使用时会在params中存在，看这个结构，如果需要多个控件的值应该也是支持的，暂时还没有尝试。

四、ProFormText关联赋值

业务需要，现在用到了文本框数据关联更新，但是没发现ProFormText有ProFormSelect相似的方法，但是也找到了实现方法。

第一种是使用ProFormDependency可以监听对应组件的值的变化，来实现ProFormText对应属性的变化，比如设置disabled的值，但仍然不能使用initialValue进行赋值，这里需要使用form进行动态赋值：theForm.setFieldValue('price_mode_name', res?.data?.price_mode_name);（form的使用此处不再多说）

<ProFormDependency name={['project_id']}>
            {({ project_id }) => {
              theForm.setFieldValue('price_mode_name', null);              
              if (project_id) {                
              getPriceMode({                  
              project_id: project_id,
                }).then((res) => {                  
                console.log(res);                  
                if (res.code) {                    
                    if (res?.data?.price_mode) {
                      theForm.setFieldValue('price_mode_name', res?.data?.price_mode_name);
                    }
                  }
                });
              }              
              return (                
              <ProFormText
                  width="xl"
                  label="缴费模式"
                  name="price_mode_name"
                  disabled={project_id == 1 ? true :false}                  
                  placeholder="缴费模式"
                />
              );
            }}
          </ProFormDependency>

如果是多个组件同时变化，也可以写多个组件

<ProFormDependency name={['project_id']}>
            {({ project_id }) => {
              theForm.setFieldValue('price_mode_name', null);              
              if (project_id) {                
              getPriceMode({                  
              project_id: project_id,
                }).then((res) => {                  
                console.log(res);                  
                if (res.code) {                    
                    if (res?.data?.price_mode) {
                      theForm.setFieldValue('price_mode_name', res?.data?.price_mode_name);
                    }
                  }
                });
              }              
              return (                
              <div>
                    <ProFormText
                        width="xl"
                        label="缴费模式"
                        name="price_mode_name"
                        disabled={project_id == 1 ? true :false}                        
                        placeholder="缴费模式"
                    />
                    <ProFormText
                        width="xl"
                        label="缴费模式"
                        name="price_mode_name1"
                        disabled={project_id == 1 ? true :false}                        
                        placeholder="缴费模式"
                    />
                </div>
              );
            }}
          </ProFormDependency>

另一种方法是利用个别组件本身的onChange方法，使用form动态赋值，onChange方法是antd 组件的方法，在Pro里面使用时，需要在fieldProps里面调用

<ProFormSelect
                      width="xl"
                      label="租赁时长"
                      name="lease_time"
                      options={[
                        { label: '半年', value: 1 },
                        { label: '一年', value: 2 },
                        { label: '二年', value: 3 },
                        { label: '三年', value: 4 },
                      ]}
                      rules={[
                        {                          
                            required: true,                          
                            message: '请选择租赁时长',
                        },
                      ]}
                      placeholder="请选择租赁时长"
                      fieldProps={{                        
                          onChange: async (value) => {                          
                          const start_at1 = theForm.getFieldValue('start_at');
                          theForm.setFieldValue('end_at', null);
                        },
                      }}
                    />

猜你喜欢

: 【AntDesignPro】使用高德地图设置考勤区域; 参考高德开放平台https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-react功能要求：使用AntDesignPro开发系统管理端，考勤模块需要设置APP考勤打卡区域，需要页面显示地图定位并设置考勤范围（地图上画圈），以便APP在画圈范围内打卡使用。1、准备2、下载react类组件代码参考官网流程，可正常加载出地图组件，下面是我的页面和组件文件组件文件3、安装并引入AmAP Loadernpm i @ama; 发表于：2023-12-14 浏览：737 TAG：

: 【AntDesignPro】AntDesignPro使用原生js，箩筐地图的使用; 项目需要把高德地图替换成箩筐地图，WEB前端使用的ant design pro，高德地图有相关的react demo，而箩筐地图只有原生js，结合上一篇文章【AntDesignPro】使用高德地图设置考勤区域，把高德地图修改为箩筐地图，实现考勤范围设置。1 html使用箩筐地图参考上一篇文章【html】箩筐地图的使用，设置考勤范围，了解实现考勤范围设置需要用到的箩筐地图接口。2 ant design pro加载原生js这个是实现功能的核心，只有js正确加载上了，地图的功能才能够正常使用。结合an; 发表于：2024-02-08 浏览：465 TAG：

: 【AntDesignPro】Ant Design Pro学习记录—播放视频和音频; 在ant design pro中，使用video和audio标签播放视频和音频1、播放视频我使用ModalForm弹框显示，autoPlay设置是否自动播放，controls设置操作按钮是否显示，设置好宽度和高度即可src是配置视频文件的链接<ModalForm         title="播放视频"        &n; 发表于：2024-05-17 浏览：444 TAG：

: 【React】前端框架 React 学习总结; 目录一、React在HTML里的运用二、React框架的常用操作项目打包1、JSX基础语法规则2、state数据的使用3、生命周期4、数据的双向绑定与Ref5、PropTypes验证规则6、React里的插槽7、错误边界8、直接操作refs元素9、高阶组件的运用案例10、性能优化11、Hook生命周期钩子的使用12、React里的计算属性三、组件之间的传值1、父子组件之间传值2、子向父传值3、context实现跨层级通信context hook案例四、网络请求框架使用五、React路由的使用声明; 发表于：2023-12-05 浏览：879 TAG： #php

: 【AntDesignPro】Ant Design Pro学习记录—前后端一体化部署; 目录前言一、系统配置二、ant design pro访问路径配置三、站点访问路径配置前言好长时间没记录了，使用ant design pro有一年了，期间陆续做了好几个项目，从陌生到熟练，还有好多钻研成果没记录，后续有时间陆续补上。之前几个项目一直是前后端分开部署的，需要配置两个站点域名访问，还要解决跨域session问题，这次把一体化部署记录一下。一、系统配置服务端用的LNMP，使用tp6框架，使用宝塔面板管理。tp站点先正常部署，步骤省略，见下图：配置网站目录和运行目录： 编辑配置伪; 发表于：2023-11-28 浏览：819 TAG：

: 【React】如何在 React 类中声明常量？; 使用 react 开发应用程序时，有必要声明常量来存储在组件或应用程序的整个生命周期中保持不变的值。常量可以帮助提高代码可读性，提供管理共享值的中心位置，并增强可维护性。在本文中，我们将探讨如何在 react 类组件中声明常量。导入 React首先，我们假设您已经设置了 React 环境并且有一个可供使用的类组件。在声明常量之前，请确保您已导入必要的库。这包括导入 React，它是在 React 中构建用户界面的核心库。import React from '; 发表于：2024-04-16 浏览：297 TAG：

: 【React】React中Typecript的使用; 目录一、创建React的TypeScript项目二、使用差别1、基本使用2、Props传值的差别3、State传参三、总结一、创建React的TypeScript项目见：如何在React项目中引入TypeScript？_duansamve的博客-CSDN博客二、使用差别1、基本使用其基本使用和javascript编写React项目时差不多这是一份.tsx文件代码：可以看到和之前的.jsx使用并无太大差别import React, { Component }; 发表于：2023-12-05 浏览：689 TAG：

: 【AntDesignPro】Ant Design Pro学习记录—ModalForm的使用（三）; 一、 Form.useForm()的使用之前使用表单的时候，一直在为表单赋值纠结，找了一些资料，也感觉很复杂，使用多了之后，感觉表单赋值也挺简单的。1、创建一个formconst [theForm] = Form.useForm();2、绑定表单组件无论是ProForm、ModalForm、还是DrawerForm，都可以绑定我们的theForm，使用属性form={theForm}绑定，代码如下<ProForm    &nb; 发表于：2024-02-20 浏览：466 TAG：

: 【AntDesignPro】Ant Design Pro学习记录—ProTable的使用（三）; 一、自定义检索条件部分列表页需要做一些简单的数据汇总统计，并能够跟随检索条件自动变化，protable自带的功能没有找到对应的实现方法，最后决定自己来实现这个功能。1、关闭ProTable自带检索功能search={false}2、自定义检索表单在ProTable上方加入自定义表单<Card bordered={false} style={{ marginBottom: 15 }}>     ; 发表于：2024-02-20 浏览：477 TAG：

: 【AntDesignPro】Ant Design Pro学习记录—ModalForm的使用（一）; 目录前言一、ModalForm销毁二、ModalForm编辑赋值三、ProFormUploadButton赋值四、其它总结前言使用了AntDesignPro，仿照TableList创建了自己的列表，列表添加编辑确成了困扰，添加编辑使用了ModalForm，有两个问题，一个使用后，页面数据无法清除，再点弹框还是原来的数据，第二个编辑的时候，初始数据赋值问题。AntDesignPro版本V5，开发工具VsCode。一、ModalForm销毁参考ant design的关闭ModalForm和Modal; 发表于：2023-11-28 浏览：631 TAG：