react
继续向前~
这个作者很懒,什么都没留下…
展开
-
Ant design pro formItem validator报警告 `callback` is deprecated. Please return a promise instead.
最近做表单校验时遇到一个警告 `callback` is deprecated. Please return a promise instead.原因 :新版的antd使用了React的hooks,表单中的字段效验方法进行了一些修改。原来的回调方法改成返回一个Promise对象原来的写法 const NameValidator = (rule, value, callback) => { if (value) { const nameLength = getText原创 2021-02-25 10:04:04 · 6864 阅读 · 4 评论 -
react 解决antd之Cascader级联标签、Select标签 无法动态修改defaultValue的属性值的办法
在antd的Cascader级联标签中,想要用变量来控制默认值的显示,经过尝试发现默认值只能写死某个数,Select标签也是一样。例如: <Cascader key={aabbcc} options={this.state.activeStoreCategoryList} expandTrigger="hover" defaultValue={[440,442,626]} onChange={this.categoryChange} />解决办法:为转载 2021-02-05 11:02:34 · 2355 阅读 · 0 评论 -
antd Design中关于Form表单 setFieldsValue 的使用
最近项目使用的是antd Design 4.x 版本,碰到个需要加载后端数据并展示,并且用户可以进行修改的需求,前端采用的是antd的Form表单来实现form表单要回填数据一般会想到的是initialValues,但是这是适用于初始化值的时候,官方文档的原话:“initialValues 不能被 setState 动态更新,你需要用 setFieldsValue 来更新” 。搜索一番setFieldsValue的使用,基本上都是:this.props.form.setFieldsValue, props转载 2021-02-05 10:58:16 · 7251 阅读 · 4 评论 -
React中constructor(props){ } super() 、super(props)究竟是什么
定义class组件,为什么需要加上 super() ?1.我们尝试去掉 super() 看看编译的结果:constructor() { this.state = {searchStr: ''}; this.handleChange = this.handleChange.bind(this);}编译错误:提示少写了super(),导致 Reference Errorcla...转载 2019-10-23 17:06:15 · 380 阅读 · 0 评论 -
Styled-Components
Styled-Components它是通过JavaScript改变CSS编写方式的解决方案之一,从根本上解决常规CSS编写的一些弊端。通过JavaScript来为CSS赋能,我们能达到常规CSS所不好处理的逻辑复杂、函数方法、复用、避免干扰。尽管像SASS、LESS这种预处理语言添加了很多用用的特性,但是他们依旧没有对改变CSS的混乱有太大的帮助。因此组织工作交给了像 BEM这样的方法,虽然比...转载 2019-02-13 18:42:29 · 1036 阅读 · 0 评论 -
箭头函数与class函数使用Antd Form组件中 Form.create()的方法
经 Form.create() 包装过的组件会自带 this.props.form 属性一、class函数使用Form.create():class CustomizedForm extends React.Component {...代码} CustomizedForm = Form.create({})(CustomizedForm);官网有详细介绍比较完整的代码段cons...原创 2019-02-12 11:43:50 · 31414 阅读 · 4 评论 -
利用js实现页面关闭时发送http请求
最近在做项目的时候,有这样一个功能,当用户在填写表单之后,或是填写了部分表单,但并没有点击提交,而且是离开了页面,这时需要前端做一个事,就是发个请求到后端保存用户填写的表单数据。一、在做这件事件之前 需要弄清楚beforeunload和unload的区别1.onunload事件是已经从服务器读取到了数据,在替换到当前页面之前执行的。2.onbeforeunload事件是正要去服务器读...原创 2019-01-03 18:49:06 · 5933 阅读 · 1 评论 -
基于react和swiper4实现无缝轮播组件 中间显示主图 左右显示部分图
子组件 commonSwiper.jsimport React, {Component} from 'react'import ImportedImage from '../../../common/components/importedImage'import '../../../common/sass/swiper'import Swiper from '../../../commo...原创 2019-01-14 15:44:09 · 3595 阅读 · 0 评论 -
react中将带标签的字符串转义为html解析
使用 dangerouslySetInnerHTML={{ __html: htmlString}}return ( &lt;div&gt;{props.record.contents.map(value =&gt; ( &lt;div className={styles.expendBlock}&gt; &lt;p dan...转载 2019-01-08 19:27:53 · 2627 阅读 · 0 评论