react
丶酸酸
这个作者很懒,什么都没留下…
展开
-
react 实现自定义拖拽hook
前沿最近发现公司的产品好几个模块用到了拖拽功能,之前拖拽组件是通过Html5 drag Api 实现的但体验并不是很好,顺便将原来的拖拽组建稍做修改,写一个自定义hook,方便大家使用拖拽功能。正文拖拽功能原理:拖拽元素通过addEventListener监听器添加鼠标按下,鼠标移动,以及鼠标抬起事件。再通过getBoundingClientRect() 得到拖拽元素四周相对于可拖拽区域边界的距离。鼠标移动时计算x轴和y轴的移动偏移量。通过element.style.transform 设置原创 2022-03-12 00:08:41 · 1865 阅读 · 3 评论 -
useState实现回调
useState实现"回调"团队最近从类组件转向函数式组件,遇到了一个问题就是无法在useState中设置回调方法。react hook,官方将setState移除了回调方法,由于setState是异步方法,没办法直接在set后拿到最新的数据,所以我们可以通过以下两种方式来拿到更新后的值。useEffect实现const [count, setCount] = useState(0);const addCount = () => { setCount(count+1);};原创 2022-03-07 22:35:06 · 6477 阅读 · 0 评论 -
antd form表单 处理自定义组件
使用 antd 中的 Form 组件时,若使用自定义组件时,保存的时候获取不到自定义组件中的值。以下是从antd找到的解决思路:被设置了 name 属性的 Form.Item 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性)我们可以通过表单控件自动添加的onChage,来做数据收集同步。父组件:import React, { Fragment, useState, useEffect, for.原创 2021-05-17 16:13:26 · 5867 阅读 · 0 评论 -
react高频面试题(react篇)
react篇前言正文React篇1.什么是JSX?2.讲一下虚拟Dom?3.类组件和函数组件之间的区别是什么?4.hooks出现的意义?5.了解React Fiber吗?6.requestIdleCallback了解多少?7.setState 同步还是异步?(比较常问)8.React-router路由模式?前言网上的React面试题文章有非常多,但很多题都过时了。有的文章只包含了react相关题目,但是真正面试不只考react问题,js,css,http,es6都会涉及的到。此片文章,针对以上几点,原创 2021-04-04 17:13:22 · 6689 阅读 · 1 评论 -
moment格式转string
Ant Design moment对象转字符串方法:moment.format(); console.log(moment(this.state.value).format('YYYY-MM-DD hh:mm:ss'),666556)原创 2021-03-02 14:32:35 · 6399 阅读 · 2 评论 -
css设置元素的隐藏与显示
react中实现列表动态显隐解决思路代码效果图:解决思路通过transform的scale缩放元素从0-1,配合transiton实现动画效果。transition: transform 0.5s;//设置过渡属性以及过渡时间transform:scale(1);//设置缩放比例transform-origin: top right; // 设置缩放顶点代码 let { eventShow} = this.state;<div className={eventShow?st原创 2021-02-19 13:42:42 · 359 阅读 · 0 评论 -
react简单使用websocket
简单使用:import React from 'react';import Socket from '@/components/WebSocket/Socket';class MessageList extends React.Component { constructor(props) { super(props); this.state = {}; this.socket = null; } //渲染前调用原创 2020-11-16 11:04:05 · 2092 阅读 · 1 评论 -
react鼠标移入移出样式修改
解决react鼠标移入移出样式修改的问题。效果截图:代码实现:js代码:<div className={styles.listStyle}> <Menu onClick={this.listClick} style={{ width: '100%', height: '100%' }}原创 2020-11-09 16:15:41 · 6045 阅读 · 0 评论 -
React 漂亮的table模板
表格页效果:代码实现:js代码:import React from 'react';import styles from './styles.less';import { connect } from 'dva';import { Input, Button, Modal, DatePicker, Table, Divider, Popconfirm, message } from 'antd';import { DownOutlined } from '@ant-design/icons'原创 2020-10-28 10:13:16 · 1533 阅读 · 2 评论 -
react消息显示器
效果代码实现完整代码:import React from 'react';import styles from './styles.less';import badgeImg from '@/assets/leftmenu/badgeImg.png';import router from 'umi/router';import { connect } from 'dva';import { Popover, Badge, Button, Modal } from 'antd';fun原创 2020-10-28 09:59:48 · 259 阅读 · 0 评论 -
vue与react的区别
vue与react的区别1.开发时2.编译时3.运行时4.渲染1.开发时1.写法:react(jsx):calss App extends Component{ makeJSX(){ return <div></div>; } render(){ return <div></div>; }}vue:<template> <div class="App"> </div></tem原创 2020-10-14 11:03:02 · 268 阅读 · 0 评论 -
React文件预览,React实现在线预览docx,xslx,pdf格式文件
一、前言由于项目需要实现文件的预览功能,通过查询百度找到了一个组件,就是react-file-viewer,其官方API中描述可支持文件格式有以下格式:图片:png,jpeg,gif,bmp,包括360度图片pdf格式CSVxslxdocx视频:mp4,webm音频:mp3但是经过我的测试发现它可以打开docx,xslx格式的文件,pdf格式的文件有时能打开有时打不开的(我刚开始测试的时候pdf格式的文件就一直打不开,但是当项目写完测试的时候发现又能打开pdf格式的文件了)。所以当时开发的原创 2020-07-30 13:28:08 · 16131 阅读 · 36 评论 -
React项目中使用Echarts图表库
最近在项目中使用到Echarts图表库,今天来分享一下我是如何使用Echarts图表库的。Echarts官网地址: https://echarts.apache.org/zh/index.html.1.通过npm获取 ECharts:npm install echarts --save2.引入Echarts// 引入 ECharts 主模块import echarts from 'echarts';3.创建一个柱状图import React from 'react';import s原创 2020-08-12 09:35:00 · 1156 阅读 · 0 评论 -
React实现打印功能,实现打印ECharts图表功能。
写在前面:由于echarts图表是动态的数据,直接打印会丢失图表数据,所以打印echarts时会先将echarts图表转换成img图片,再进行打印。*当多次循环调用echarts图表时,请注意要动态的修改绑定div的id,不要让多个echarts图表div的id相同。一、先创建打印页面创建PrintBox文件夹,在其中新建index.js文件以及styles.less文件,BarChart与PieChart是自己写的图表组件。(一会给你们看这俩页面的代码)index.js页面小伙伴们,我这里是已原创 2020-08-14 17:58:27 · 888 阅读 · 0 评论 -
在react中实现局部页面打印功能
最近遇到了打印页面的问题。使用window.print()打印,取消打印页面,页面会出现bug,需要用window.reload()重新加载一下页面,用户体验很差。1.为了解决该问题,可以使用iframe的方式解决:(但是设置打印区域样式是个问题,只能写行内样式)代码://确认打印 printOk() { //获取打印区域 const printDiv= document.getElementById('printDiv'); const iframe = document.原创 2020-08-21 17:19:34 · 2299 阅读 · 2 评论 -
嵌套在iframe页面打印去掉页眉页尾
通过iframe打印局部页面时,去掉页眉页尾://确认打印 printOk() { const el = document.getElementById('printDiv'); const iframe = document.createElement('IFRAME'); let doc = null; iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;to原创 2020-08-21 17:25:45 · 982 阅读 · 0 评论