react
郭从墨
这个作者很懒,什么都没留下…
展开
-
window.open新开的标签页获取不到最新的redux数据
最近遇到一个小问题,在tab1标签页点击一个按钮,然后期望的效果是点击之后新开一个标签页,在该新的标签页里面可以查看对应的图片信息,图片信息是在前一个页面中获取到的。对此我首要的解决方案就是使用redux,但是开发完发现在新开的标签页中读取到的store数据都是redux中的初始化store数据,前一个页面中store中更新的最新数据根本获取不到,后来查看资料后才知道,通过window.open打开的新标签页其获取的state和前一个页面的state是分离的,所以无论前一个页面如何保存数据,新开的标签页原创 2020-08-05 11:25:19 · 801 阅读 · 0 评论 -
antd Form表单读取不到input的值
今天上午突然反馈了一个问题,表单中的一个输入框用户明明输入了,但是提交到后台之后是没有数据的。我在本地测试了一下,发现也是同样的情况。后来仔细看了一下代码,原来的input的外面包裹了一个Fragment元素,后来我将Fragment元素修改为div或者其他标签,都是可以正常获取到这个input的值的,但是就是Fragment包裹起来的话获取到始终都是undefined。从rc-form中看getFieldDecorator源代码其是调用React.cloneElement来返回一个最终元素的,但是不知原创 2020-05-28 16:20:52 · 2887 阅读 · 0 评论 -
图片按照顺序上传
最近遇到一个文件上传的需求,这里记录一下:产品希望的效果是可以按照在客户端选择的顺序上传,并且展示在页面中这里我使用的组件是antd的Upload组件,该组件支持多文件上传,但是其对于多个文件上传的处理通过在控制台中就可以看到其实是一个一个文件调用接口上传的,这样的话因为文件大小不一致,小的文件就会先返回回来,大的文件就会慢一点,这样的话就会导致最终传递到后端的文件链接顺序和当初选择的顺序...原创 2020-05-07 21:56:46 · 3628 阅读 · 1 评论 -
create-react-app创建项目
最近公司的项目不再推荐使用react-app-rewired框架封装项目,基本上都使用create-react-app弹出配置来自定义实现配置功能,这里记录一下:创建模板:npxcreate-react-appmyApp --templatetypescript,这里使用是typeScript模板,如果不需要可以去掉 弹出配置:yarn run eject 配置antd实现按需加载,...原创 2020-04-30 17:24:31 · 196 阅读 · 0 评论 -
记录富文本编辑器
最近项目中需要使用到富文本编辑器,我们使用的是react开发项目,所以想找一个基于React开发的富文本编辑器,首先找到是braft-editor,但是后来发现这款富文本编辑器在呈现表格,a链接,图片等html元素的时候和实际的效果差别有些大,所以为了能够完美的展示富文本编辑器的内容,后来选用了umeditor,这是一款mini版本的百度富文本编辑器,而且是基于React开发,后来选用了这款富文本...原创 2020-04-25 16:42:56 · 323 阅读 · 0 评论 -
React Hooks依赖项数组中使用antd中的form导致页面陷入死循环
最近在逐渐将函数写法从class组建从函数组件转变,在开发的过程中遇到了一个表单中的小问题,这里记录一下:场景:页面有两个下拉框,有联动关系,第二个下拉框需要根据第一个下拉框的值发生变化,所以在第一个下拉框的onChange的回调函数中完成数据获取之后,需要调用form.setFieldsValue将第二个下拉框中的值更新掉,但是hooks插件会提示你缺少了一个form依赖项,当把form依赖...原创 2020-04-18 16:26:24 · 1815 阅读 · 0 评论 -
React中打印页面,样式不起作用
从网上搜索的结果来看,一种方法就是使用内联样式,但是很明显如果我们的页面中有很多元素,并且页面的动效多的时候,内联样式就不可取了,既不雅观将来也不好维护 。还有一种方式就是使用react-to-print这个插件来做,这里我并没有用到。我最近也遇到了React中调用window.print打印页面,但是样式不起作用的问题。我的解决方法是使用了媒体查询,把打印时需要用到的样式放到@media...原创 2020-02-20 16:39:41 · 2338 阅读 · 0 评论 -
React 项目本地运行成功,build时 Failed to minify the code from this file
今天部署项目的时候一直部署不成功,大概部署了五六次,每次都失败。开始以为是机器出了问题,后来就在同一台机器上部署另外一个项目,居然成功了。后来就在本地运行npm run build命令,发现失败,截图如下:原来是query-string库没有正常转换成ES5出的问题,将query-string. 错误版本:~6.0.0 降级版本:~5.1.1 就可以正常运行成功了...原创 2019-05-15 10:56:02 · 3249 阅读 · 0 评论 -
React中向事件处理程序传递参数
之前使用React的事件处理程序大都直接使用下面的两个形式:this.handleClick = this.handleClick.bind(this);// public class fields 语法handleClick = () => { console.log('this is:', this);}可是在程序中给事件处理程序传递参数的时候,如果还是直接用类似on...原创 2019-05-14 23:46:09 · 887 阅读 · 2 评论 -
日常开发中的一些小技巧
# 日常开发中的一些小技巧## console1. console.log + console.log是我我们日常开发中最常用的,但是console.log还有一些另外的用法,console.log支持格式化输出: console.log(msg, values) ``` console.log('I like %s but I do not like %s.', 'Sk...原创 2019-04-23 09:34:23 · 396 阅读 · 0 评论 -
Failed to set the 'value' property on 'HTMLInputElement'
记录今天遇到的一个小问题,文件上传格式不对,我想直接对file类型的value赋值,但是当运行到这一行的时候,页面会报错,并且显示Failed to set the 'value' property on 'HTMLInputElement'这样的错误,这里提示说不能直接赋值,所以我就使用了setAttribute这个API函数,发现页面不报错了,但是value还是没有重置为空字符串,虽然没有报错...原创 2019-02-18 11:23:36 · 5492 阅读 · 1 评论