![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ant.design
吃瓜群众欢乐多
菜鸟烦恼多
展开
-
DatePicker(disabledDate)最小日期和最大日期限制
DatePicker(disabledDate)最小日期和最大日期限制原创 2022-12-09 15:29:13 · 859 阅读 · 0 评论 -
React modal自定义 openModal
React modal自定义 openModal原创 2022-12-07 16:05:37 · 512 阅读 · 0 评论 -
react useModal自定义弹窗代码
react useModal自定义弹窗代码原创 2022-12-07 10:28:43 · 648 阅读 · 0 评论 -
ant.design上传问题:Upload file.status is always being uploading
file状态一直未uploading对于受控模式,你应该在 onChange 中始终 setState fileList,保证所有状态同步到 Upload 内。类似这里的写法:比如// goodonFileChange(fileList) { if ( ... ) { ... } else { ... } // always setState this.setState({ fileList: [...fileList] });}![在这里插入图片描述](原创 2021-04-20 11:09:12 · 666 阅读 · 0 评论 -
ant design中的Form.List 如何支持dependencies
1、单个官网例子:打开2、多个Form.List<Form name="dynamic_form_nest_item" onFinish={ onFinish } autoComplete="off"> <Form.List name="users"> { ( fields, { add, remove } ) => ( <> { fields.map( ( field ) => ( <S原创 2021-04-01 15:38:22 · 4403 阅读 · 1 评论 -
(React ant design Warning): dispatch: settings/changeSetting should not be prefixed with names
原因:在namespace为’settings’的js文件中调用dispatch,不需要加上settings前缀,解决办法:删除settings/即可import { Reducer, Subscription } from 'umi';const SettingModel= { namespace: 'settings', state: defaultSettings, reducers: { changeSetting(state = defaultSettings, { p原创 2021-03-03 14:26:47 · 616 阅读 · 1 评论 -
用ant.design实现一个form table,实现在table中输入和校验。并且获取table列表值
用ant.design实现一个table表格,实现输入和校验。能够实时获取form值实现效果如图代码如下ListTableForm.tsximport React, { useEffect, useState } from "react";import { Form, Table } from 'antd'import { MinusCircleOutlined, PlusCircleOutlined } from "@ant-design/icons";import styles f原创 2021-02-09 09:48:24 · 8175 阅读 · 2 评论 -
umi ant.design 项目打包后@ant-design文件占据内存太大
现在遇到一个问题,npm run build后打包文件由30M,用npm run analyze "analyze": "cross-env ANALYZE=1 umi build",分析后发现是图标库占据内存的原因。原创 2021-02-04 17:22:20 · 1213 阅读 · 0 评论 -
基于ant.design做一个可编辑的table表格,且实现可校验样式、增加、删除数据
主要利用Form.List的field进行拓展,结合table使用嵌套表单字段需要对 field 进行拓展,将 field.name 和 field.fieldKey 应用于控制字段。// 只贴关键代码const onFinish = (values)=>{ console.log(values) // 可以得到table}<Form initialValues={ {table:[{name:'lily'},{name:'lisa'}]} } onFinish={ onFi原创 2021-02-03 17:45:40 · 5530 阅读 · 5 评论 -
TypeScript枚举的运用实例
原来的写法//0:未提交,1待复核,2:已通过,3:已驳回import { Tag } from "antd";import React from "react";//0:未提交,1待复核,2:已通过,3:已驳回export default ({status}) => { switch ( status ) { case 0: return <Tag color="#108ee9">未提交</Tag>; case 1: .原创 2020-12-31 16:27:28 · 593 阅读 · 1 评论 -
基于ant.design的FormList,通过配置生成动态列表
目前只配置了输入框和文本框,需要的可自定义添加type实现效果如图const initValues = [ {type:'input',name:'start',label:'最小值',initValue:'',}, {type:'input',name:'end',label:'最大值',initValue:'',}, {type:'text',name:'unit',label:'采购单位',initValue:'盒',rules:[]}, {type:'input',name原创 2020-12-08 09:28:57 · 4120 阅读 · 2 评论 -
qiankun-前端微服务父项目与子项目的配置
前提,用umi建立两个项目,参考链接一、父项目1.package.json// yarn add @umijs/plugin-qiankun -D "devDependencies": { "@umijs/plugin-qiankun": "^2.7.0"}2.config.tsimport { defineConfig } from 'umi';export default defineConfig({ define: { 'process.env.apiUrl原创 2020-08-18 10:54:32 · 2510 阅读 · 0 评论 -
ant design页面切换动画
我想实现登录页面,页面之间切换,有动画效果实现代码// duration number 450 动画时间 ,// 当duration为数组是,Array[inTime,outTime],第一个参数表示显示动画过渡时间,第二个表示消失动画过渡时间,当我设置为[450,0]时,实现了无缝切换 <Button onClick={()=>{this.setState({page:'youName'})}}>点击切换</Button> <Queue原创 2020-08-06 15:34:44 · 2364 阅读 · 0 评论 -
react(ant.design)项目加载三方验证码TCaptcha.js的Demo
import React, { useState } from 'react';import Script from 'react-load-script';import { message } from "antd";const DynamicScriptExample: React.FC<{}>=()=> { const [scriptLoaded,setScriptLoaded] = useState(false); const handleScriptError原创 2020-07-24 10:07:56 · 2443 阅读 · 0 评论 -
用umi搭建项目微服务-qiankun微服务的配置
一、父项目的搭建// 1.新建项目yarn create @umijs/umi-app// 2.下载依赖yarn// 3.在packjson的devDependencies中添加qiankun依赖yarn add @umijs/plugin-qiankun --dev // 或 npm install @umijs/plugin-qiankun --save4.main/.umirc.ts中配置Umi 在 .umirc.ts 或 config/config.ts 中配置项目和插件原创 2020-07-23 09:26:09 · 5939 阅读 · 7 评论 -
antd的form表单的输入框设置不能输入空格(以电话输入框为例)
概况实现效果:当复制粘贴电话号码到输入框时,难免不小心复制一些莫名的字符到输入框,但是输入框不能识别,以下面这个str为例解决办法:getValueFromEvent问题let str = "135 3898 8889"这个str的长度是电话号码,应该是11位+2个空格,共13位。但是不知为啥,我删除了2个空格就是校验不成功,如下图分析经过分析发现,这个字符串长度是14,因为该字符串最后一位是一个未知字符。导致校验不成功解决办法(getValueFromEven..原创 2020-07-18 11:03:30 · 5633 阅读 · 0 评论 -
react hook - useEffect详解
1、不传递useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后,当它运行时,它获取数据并更新状态。然后,一旦状态更新,组件将重新呈现,这将再次触发useEffect,这就是问题所在。2、传递空数组3、传递count4、传递props的对象 传递的useState返回的setter//1 useEffect(()=>{ console.log(props.number) setNumber(props.number) }) //所有更新都执行原创 2020-07-15 15:59:54 · 7128 阅读 · 1 评论 -
父组件异步传递的props,子组件更新显示
父组件import React from "react";import Component from './components/useEffect'class Test extends React.Component { state = { count:1 } changeNumber =()=>{ let {count} = this.state; count++; this.setState({ count }) .原创 2020-07-15 15:28:31 · 1168 阅读 · 0 评论 -
控制台报错:如何在组件销毁的时候将异步请求撤销
Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.当我们点击组件A后,组件A需要3秒的时间才能获取原创 2020-07-10 15:08:37 · 976 阅读 · 0 评论 -
React中createContext和useContext的使用-实例
在demo中,我可以通过全局组件传递一个属性改变按钮的颜色,当父组件改变color颜色时,子组件也随之改变颜色当组件上层最近的 <MyContext.Provider> 更新时,该 Hook 会触发重渲染,并使用最新传递给 MyContext provider 的 context value 值。即使祖先使用 React.memo 或 shouldComponentUpdate,也会在组件本身使用 useContext 时重新渲染 查看原文ThemeContext.tsximpor原创 2020-07-07 10:35:37 · 2050 阅读 · 0 评论 -
react ant design自定义组件如何进行表单校验?示例
自定义组件import React, { useState } from 'react';import { Input } from 'antd';interface PriceInputProps { value?: string; onChange?: (value: {number: string | undefined; email: string | undefined}) => void;}const FormComponent: React.FC<Pric.原创 2020-07-06 12:15:21 · 1823 阅读 · 0 评论 -
react获取表单form对象的两种方式,获取form后进行重置
1.函数组件 const [form] = Form.useForm(); useEffect(() => { form.setFieldsValue({...initialValues}); }, [])return <Form form={form} onFinish={ this.onFinish } onFinishFailed={ this.onFinishFailed } .原创 2020-06-24 11:58:10 · 4298 阅读 · 4 评论 -
react ant design项目,使用umi-request实现http缓存
//'useCache'当'useCache'为true时,GET请求将在ttl毫秒内缓存。 //缓存键为“ url +参数+方法”。 useCache:false , //默认 //'ttl'缓存持续时间(毫秒),0为无穷大 ttl:60000 , //'maxCache'是要缓存的最大请求数,0表示无穷大。 maxCache:0 , // 根据http协议,GET请求用于从服务器获取数据,当服务器数据更新不频繁时,有必要缓存响应数据。 // 对于某些需要使用其他方法原创 2020-06-16 17:52:53 · 2300 阅读 · 1 评论 -
react项目umi-request发送数据的两种方法
body传请求完整地址: http://192.168.11.57:8380/rest/user-center/v1/user/sendVerifyCode/reset用法export async function sendResetVerifyCode(params: {account: string}) { return request(`/rest/user-center/v1/user/sendVerifyCode/reset`, { data:{...params},原创 2020-06-12 15:29:57 · 4367 阅读 · 0 评论 -
跨域出现Provisional headers are shown 报错
原因一服务器禁止跨域(优先查找)原因二检查自己电脑网络原创 2020-06-11 14:36:04 · 2447 阅读 · 0 评论 -
react ant.design pro项目中实现innerHTML
html中这样写<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <.原创 2020-06-05 11:05:20 · 742 阅读 · 0 评论 -
基于ant.design4.3.1实现table的编辑
实现效果如图所示import React, { useState } from "react";import { Table, Input, InputNumber } from 'antd'import { MinusCircleOutlined, PlusCircleOutlined } from "@ant-design/icons";import styles from './style.less'interface TableFromListItem { key: numb.原创 2020-06-04 17:42:29 · 927 阅读 · 0 评论