React
学习React以及所遇到的问题
hero_th
当打之年,感恩一切!
展开
-
React [Umi] history(API) 路由监听
路由跳转import { history } from 'umi';// 跳转到指定路由history.push('/welcome')// 带参数跳转到指定路由history.push('/welcome?title=value')history.push({ pathname: '/welcome', query: { title: 'value' }})// 跳转到上一个路由history.goBack();路由监听componen原创 2021-09-01 09:10:08 · 3845 阅读 · 0 评论 -
react 设置背景图片 (等比例显示,不拉伸)
js 代码部分<div className={styles.img_box} > <div className={styles.img} style={{backgroundImage: `url(${this.state.url})`}} /></div>less 代码部分.img_box{ width: 100%; height: 610px; .img{ width: 100%; height: 1原创 2021-09-01 09:05:20 · 3336 阅读 · 1 评论 -
antd 使用upload 组件,使用自定义上传行为,覆盖默认action 访问请求
今天遇到测试提起的一个项目bug。使用antd里面的 upload 组件上传图片,本地测试使用没有问题。当项目上传到服务器,测试 接口报405,打开控制台中的network,访问了一个没有调用的接口,nginx 报405。网上查询资料,是upload组件上传图片默认调用了action 路径,如果未设置的话,就以当前网页的url为路径进行访问。方法为post请求进行访问静态资源。使用customRequest属性来阻止默认上传行为<Upload name="avatar" list.原创 2021-08-25 15:31:40 · 12137 阅读 · 1 评论 -
表单元素设置disabled后 支持点击事件
<Label onClick={this.handleClickOver.bind(this)} className='checkbox-list__label' for={i} key={i}> <Checkbox disabled style={{pointerEvents:'none'}} className='checkbox-list__checkbox' value={i}> </Checkbox></Label>原创 2021-08-11 17:55:36 · 901 阅读 · 0 评论 -
React taro 微信小程序上传文件 多个文件上传
handleUploadFile(){ let that = this; wx.chooseMessageFile({ count: 4,//最多上传四张 success(res){ const tempFiles=res.tempFiles; var successUp = 0; //成功 var failUp = 0; //失败 var length = tempFiles.length; //总数原创 2021-08-08 21:19:56 · 1602 阅读 · 0 评论 -
React 单文件上传和多文件上传的封装
1. 新建request.ts 文件@/utils/request.ts// 文件上传export const requestFile = async (params: { [key: string]: any }, query: Function, successFn: Function, progressFn?: Function, errorFn?: Function) => { const formData = new FormData(); formData.appe原创 2021-08-08 21:08:38 · 1602 阅读 · 0 评论 -
React antd 使用类式组件 对表单数据域进行控制 this.formRef.current.setFieldsValue
Class component1. 创建refclass Demo extends React.Component { formRef = React.createRef(); state={ }}2. 表单绑定ref//ref={this.formRef} 先给Form <Form {...layout} ref={this.formRef} name="control-ref" onFinish={this.onFinish}> <原创 2021-08-08 20:51:35 · 4206 阅读 · 1 评论 -
将 url query参数 字符串转换为JSON 对象
Importimport querystring from 'querystring'Usagelet str = '?username=admin&password=123456';let newStr = querystring.parse(str);console.log(newStr);//打印输入如下{ "?username":"admin", "password":"123456"}因为通常情况 url 中的query参数会带有?,所以我们会先截取一下。原创 2021-08-01 16:43:07 · 1693 阅读 · 0 评论 -
前端使用 geetest 行为验证 web-部署教程
1. 完成服务端部署需要后端部署完成。接口返回以下必传参数2. 引入初始化js函数gt.js下载地址<script src="gt.js"></script>3. 调用初始化函数进行初始化initGeetest({ // data中以下配置参数来自服务端 SDK gt: data.gt, challenge: data.challenge, offline: !data.success, new_captcha: true}原创 2021-08-01 12:19:13 · 1206 阅读 · 0 评论 -
react 使用cookie react-cookies
react-cookiesInstallnpm install react-cookies -S//oryarn add react-cookies -SImportimport cookie from 'react-cookie'Handle//存cookie.save(key, value, { path: '/' });//取cookie.load(key)//删除cookie.remove(key, { path: '/' }){ path: ‘/’ }加上这个原创 2021-07-30 17:54:02 · 2449 阅读 · 0 评论 -
React 使用图片验证码组件(登录验证)
安装插件npm install react-captcha-code -S//oryarn add react-captcha-code -S属性和方法名称类型必填默认值描述heightnumber否40图片高度widthnumber否100图片宽度bgColorstring否#DFF0D8背景颜色charNumnumber否4验证码字符个数fontSizenumber否25字体大小onChange原创 2021-07-30 17:34:35 · 3776 阅读 · 3 评论 -
React + leaflet 地图瓦片 加载错乱 不能正常显示
1. 在index.js 中引用css样式import '../../../node_modules/leaflet/dist/leaflet.css'2. 给指定地图容器设置高度<div id='map' style={{ height: '700px'}} ></div>原创 2021-07-21 16:22:48 · 1053 阅读 · 0 评论 -
Protable 自定义添加搜索栏和toolbar
Code //自定义搜索栏按钮 search={{ defaultCollapsed: false, optionRender: (searchConfig, formProps, dom) => [ ...dom.reverse(), <Button key="out">导出</Button>, ], }} //自定义添加toolbar按钮 toolBarRender={() => [ <Button key=原创 2021-07-16 17:09:39 · 4122 阅读 · 1 评论 -
前端实现 导出图片,导出PDF(截图原理)
导出图片1.安装依赖yarn add dom-to-image 或 npm install dom-to-image --saveyarn add file-saver 或 npm install file-saver --save2.代码实现//导入包import domtoimage from 'dom-to-image';import { saveAs } from 'file-saver';//导出图片 handleExportPhoto = ()=>{ //ex原创 2021-07-15 17:18:30 · 2423 阅读 · 0 评论 -
React antD 使用Select 进阶功能 远程搜索,防抖控制,加载状态
1. 引入组件import { Select, Spin } from 'antd'; //引入选择器import debounce from 'lodash/debounce'; //函数防抖const { Option } = Select;2. 配置Select 选择器一些属性就不在这一一介绍了,关键的属性在旁边写好了注释,是必须要加上的。想了解更多属性的,可以自行在官网查询.antd已经给我们封装好了加载状态的组件:<Spin /> .然后通过state控制其出现和消失.原创 2021-07-13 21:19:24 · 4715 阅读 · 4 评论 -
React antD-Pro 添加函数防抖
在实际项目当中,一个函数可能会由于某种状态的改变,被调用多次,然后后端的接口就会被反复的调用。这时候,我们需要做一个性能优化,增加函数防抖功能。添加函数防抖插件:lodash/debounceimport debounce from 'lodash/debounce'; //在constructor统一绑定事件. 和经常使用的bind(this)一样class Demo extends React.Component { constructor(props) { super(pro.原创 2021-07-13 20:45:38 · 708 阅读 · 0 评论 -
yarn create @umijs/umi-app或者yarn create umi myapp 报错:文件名、目录名或卷标语法不正确。
1. Problem Description在学习ant-design,使用 @umijs/umi-app 为模板,创建一个项目:和ant-design-pro的时候,使用umi myapp 创建一个项目时。yarn create @umijs/umi-app//或者yarn create umi myapp发生报错,报错如下显示报错:文件名、目录名或卷标语法不正确。很难受,上午也没整明白,下午也没整明白。2. Problem Analysis本质是因为yarn包的安装位置在C盘(原创 2021-07-05 17:52:09 · 1646 阅读 · 0 评论