react
0110_1024
学习ing
展开
-
使用react-dnd + react-dnd-html5-backend 实现节点拖动排序
使用reac-dnd,react-dnd-html5-backend实现节点拖动排序原创 2022-11-08 15:34:58 · 1726 阅读 · 1 评论 -
antd Form组件的onValuesChange没有触发问题
antd Form组件的onValuesChange回调,在通过form.setFieldValue / form.setFieldsValue api修改时,不会触发。原创 2022-10-10 14:19:15 · 3398 阅读 · 0 评论 -
本地文件上传按钮组件
封装一款好看的文件上传按钮import React from 'react';import './index.scss';class SelectFileButton extends React.Component { constructor(props) { super(props); } onChange = (event) => { let e = event || window.event; let files = e.target.files;原创 2022-05-18 10:46:52 · 182 阅读 · 0 评论 -
实现浏览器下载文件
实现浏览器下载文件的方法有以下几种,采用fileSaver插件,接收的是文件的Blob,用法是fileSaver.save('文件流', ‘导出文件名’);可适用于get,post方式的下载;采用a标签,配置属性download,href就是你要下载的文件地址,download就是下载的文件名,这种方法只适用于get请求方式;采用iframe也可实现a标签的效果,这种方法只适用于get请求方式;iframe内嵌套form表单,实现模拟提交,可实现post方法的文件下载;...原创 2021-03-29 11:06:42 · 378 阅读 · 0 评论 -
react-responsive-carousel,一款好用的react的banner插件
React Responsive Carousel是一个基于React.js响应式轮播,功能强大,轻巧且可完全自定义,用于基于React的APP安装React Responsive Carouselnpm install --save react-responsive-carousel使用react-responsive-carouselimport React from 'react';import "react-responsive-carousel/lib/styles/carousel.原创 2020-11-25 10:48:16 · 2095 阅读 · 0 评论 -
使用react-cropper结合图片压缩方法对图片进行裁剪压缩处理
最近项目要使用图片裁剪上传,因为项目采用的是react+antd,所以第一时间想到的是ImgCrop插件,但是这不满足项目需求,项目要求的是能够缩放裁剪框,最后确定了采用react-cropper来实现图片的自定义裁剪安装react-croppernpm install --save react-cropper新建一个CropperModal.jsximport React, { useState, useEffect, useCallback, useRef } from 'react'impo原创 2020-11-13 17:03:45 · 1017 阅读 · 0 评论 -
解决react 多行文本显示省略号不生效问题
在普通的前端css中,如果要是文本超出一行就显示省略号,一般在css中写:.box { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all;}要想多行文本显示省略号(这里不考虑兼容情况),一般这样写:.box { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -w原创 2020-07-02 18:41:52 · 1274 阅读 · 0 评论 -
记录一下重构项目中遇到的坑1
在重构项目中遇到了一个问题,就是在umi框架内部打开一个外部链接,本地是能够在新的窗口打开该页面,但是放到服务器上就会出现404原因找了半天,结果是路由模式不对,这里要采用hash路由模式,新的小问题又出现了,放到服务器上能够正常打开外部链接,但是不会自动聚焦到第一个路由上面,然后又开始补bug,写了一个自动跳转到首页的函数 -。-import router from 'umi/router';goToFirstPage() { router.push('/first'); }..原创 2020-06-02 11:37:44 · 204 阅读 · 0 评论 -
antd表格结合react-dnd、react-dnd-html5-backend、immutability-helper实现表头拖拽功能
最近公司打算重构老项目,采用的技术是蚂蚁的umi框架、antd design pro 、react16.8以及dva。重构过程中,遇到了很多坑,解决了也收获了很多,在这里先说一下antd中的表格表头拖拽排序功能。先去antd官网了解一下table的相关api方法,目前它做了表格内数据的上下拖拽排序,是结合react-dnd、react-dnd-html5-backend、immutability-helper这三个插件来实现的,这三个插件网上都各自有相应的介绍和用法,自己百度哦。这里我们想横向拖动表头也原创 2020-06-02 11:23:39 · 4665 阅读 · 2 评论 -
react实现点击循环数据中的button,弹出弹窗或者产生新的数据
在最近的一次项目中,根据项目需求,需要做一个如下的需求点击+button,产生一个新的链接输入框思路解析:根据数据循环产生多少个button,我们需要循环生成多少个容器,然后将所有生成的容器放到一个公共的数据容器里面,让后面能够使用数据的时候给方便在state中定义一个公共的数据容器:this.state={ addLinks:[], addLink:0 //初始化点击数据}...原创 2020-01-22 15:54:28 · 2324 阅读 · 0 评论 -
react父子组件之间的传值以及访问真实的dom元素
react父子组件之间的传值以及访问真实的dom元素react父子组件之间的传值父组件通过props向子组件传值父组件:<son content="something" />子组件在contructor(props){ super(props)}通过this.props.something来调用父组件获取子组件的值使用过回调实现的子组件:class So...原创 2019-11-25 23:41:54 · 733 阅读 · 0 评论 -
在使用react+express引入js、或者css文件的时候net::ERR_ABORTED
自己捣鼓express+react+webpack的时候,出现了一个get ../index.bundle.jsnet::ERR_ABORTED 404 not found的问题。在网上找了很多解决方法,都没有解决这个问题后来慢慢去项目中定位问题,才发现和静态资源配置有关我在app.js中的静态资源配置如下:app.use('/client/static', express.static(...原创 2019-03-21 12:06:02 · 1089 阅读 · 0 评论 -
react + express + node + webpack
最近想搭建一个react + express + node + webpack的全栈的网站 (自己安装好node)1 安装expressnpm install express -g2.安装express-generatornpm install -g express-generator 3.创建项目express -e projectname //(这里生成的模板引擎是ejs...原创 2019-03-21 11:40:55 · 396 阅读 · 0 评论