react
After_wade
这个作者很懒,什么都没留下…
展开
-
解决h5页面在ios中可以拖动的bug
参考链接:http://www.javashuo.com/article/p-bfdsqpgw-y.html转载 2021-12-30 09:58:31 · 1843 阅读 · 0 评论 -
React刷新页面保存tab切换栏的tabList和activeKey
import {React,useState} from 'react'import storage from './util/storage'const app = () => { const [tabList,setTabList]=useState(storage.get("tabList")||"") const [activeKey,setActiveKey]=useState(storage.get("activeKey")||[]); const listen原创 2021-04-25 13:36:30 · 1142 阅读 · 0 评论 -
react中限制input框输入表情和特殊字符
//表情const emojiReg=/(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]/g;//特殊字符const scReg=/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、]/im;利用input的value和onChange属性, if (!emojiReg原创 2021-03-29 19:26:36 · 2264 阅读 · 0 评论 -
dva引入页面分别在类式组件和函数式组件中的使用
类式组件:import React from "react";import {Component} from 'react';import { connect } from "dva"; //从dva中导入connectimport {Button} from "antd"; class Counter extends Component { constructor(props){ super(props) } //做dispatch分发的方法,相当原创 2021-03-11 19:15:25 · 2355 阅读 · 0 评论 -
react实现多选框切换样式逻辑
import React, { Component } from 'react'class App extends Component { constructor(props) { super(props); this.state = { checkboxItems:[ {content:"吃",checked:false}, {content:"喝",checked:false}, {content:"玩"转载 2021-03-04 14:28:15 · 599 阅读 · 1 评论 -
react脚手架配置代理
react脚手架配置代理总结方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明:优点:配置简单,前端请求资源时可以不加任何前缀。缺点:不能配置多个代理。工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)方法二第一步:创建代理配置文件在src下创建配置文件:src/setupProxy.js编写setupProxy.js配置具体代理规则:const原创 2021-01-18 14:34:43 · 300 阅读 · 0 评论 -
antd的按需引入与自定义主题
1.安装依赖:yarn add react-app-rewired customize-cra babel-plugin-import less less-loader2.修改package.json…“scripts”: {“start”: “react-app-rewired start”,“build”: “react-app-rewired build”,“test”: “react-app-rewired test”,“eject”: “react-scripts eject”},原创 2021-01-18 14:10:16 · 439 阅读 · 1 评论 -
react-router笔记总结
react-router前端路由的基石_history:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>前端路由的基石_history</title></head><body> <a href="http://www.atguigu.com" onclick="return push('/test1原创 2021-01-18 14:05:59 · 462 阅读 · 0 评论 -
react组件生命周期(包含新旧版本)
1.对组件生命周期的理解组件从创建到死亡它会经历一些特定的阶段。React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作。2.生命周期(旧)生命周期的三个阶段(旧版本,react17之前)初始化阶段: 由ReactDOM.render()触发—初次渲染 constructor() componentWillMount() render() componentDidMount()原创 2021-01-11 16:41:01 · 453 阅读 · 1 评论 -
react报错Can‘t perform a React state update on an unmounted component. This is a no-op, but it indicat
我们在react开发中经常遇到这个报错:经过查阅资料后解决了这个报错,在这里记录一下。这句话大概意思是:我们不能在组件销毁后设置state,防止出现内存泄漏的情况关于react中切换路由时报以上错误,实际的原因是因为在组件挂载(mounted)之后进行了异步操作,比如ajax请求或者设置了定时器等,而你在callback中进行了setState操作。当你切换路由时,组件已经被卸载(unmounted)了,此时异步操作中callback还在执行,因此setState没有得到值。解决方法:一、在卸载转载 2021-01-06 15:01:11 · 894 阅读 · 0 评论 -
给antd中table表格奇偶行设置不同样式(背景颜色交替)
今天在写大屏的时候碰到一个需求,需要将table表格展示的数据每一行背景颜色交替,翻阅资料后,完成了这个需求。如下图:table组件中有个rowClassName属性,让我们可以通过给每一行添加不同的类名然后设置不同行的样式jsx代码:import React, { Component } from 'react';import {Layout,Select,Table} from 'antd'import './index.less'const { Option } = Select;翻译 2020-12-29 16:47:30 · 6337 阅读 · 0 评论 -
解决bizcharts折线图中坐标文本颠倒
先上图片,今天在使用bizcharts的折线图统计数据的时候发现当坐标系的值设为小数或者字符串的时候,坐标系上面的文本会颠倒位置 // 折线图数据 //mock一下data数据 const linedata = []; let arr=[1,0.2,0.3,0.8,0.8,0.9,0.9,0.9,0.4,0.4,0.5,0.6,0.7,0.3,0.5] for(let i=14;i>=0;i--){ l.原创 2020-12-16 17:30:41 · 789 阅读 · 0 评论 -
js中将一条数据的value值添加为需要的key值
今天在写react项目时,需要将后台传过来的6条数据整合显示到antd的table组件上,需要为数据添加例如“2020-11-02”的日期字段,value为staffName,这里记录一下整合过程。<script> var arr = [ { "id": 1, "staff_shift_id": 1, "shift_time": "2020-11-08", "shift_id原创 2020-11-10 19:29:45 · 823 阅读 · 0 评论 -
JavaScript根据开始时间和结束时间计算具体礼拜几
今天碰到一个需求,需要根据时间搓()的开始时间和结束时间计算出具体礼拜几然后显示在table里的表头上,于是写一个下面的timeCount方法,传入开始时间和结束即可,比如 timeCout(“2020-10-1”,“2020-10-7”)即可调用;function getDate(datestr){ var temp = datestr.split("-"); var date = new Date(temp[0],temp[1],temp[2]); return date;}原创 2020-10-16 19:12:47 · 388 阅读 · 0 评论 -
js中用map方法给数组添加新属性和过滤不要的属性
onSubmit = () => { const { validateFields, resetFields } = this.props.form; validateFields((err, values) => { if (!err) { console.log(values) debugger if (this.store.modalTit原创 2020-10-14 13:38:32 · 2933 阅读 · 0 评论 -
ajax请求接口导致status为canceled的解决方法
如图所示:今天在对接口的时候,发现请求变红,status显示为cancel,刚开始觉得是请求超时,然后经过调试后发现,请求的参数能进后台接口,但是前台拿不到返回的信息。场景复现:FilterForm.jsimport React from 'react';import { Form,Input, Button,DatePicker} from 'antd';import { inject, observer } from 'mobx-react';const FormItem = Form.原创 2020-09-30 15:41:58 · 6900 阅读 · 0 评论 -
前台分页和后台分页
最近在做后台管理系统项目中遇到分页的需求,今天把做项目中关于分页的笔记分享一下。分页实现技术(2种)1). 前台分页 请求获取数据: 一次获取所有数据, 翻页时不需要再发请求 请求接口: 不需要指定请求参数: 页码(pageNum)和每页数量(pageSize) 响应数据: 所有数据的数组2). 基于后台的分页 请求获取数据: 每次只获取当前页的数据, 翻页时要发请求(触发onchange事件发请求) 请求接口: 需要原创 2020-09-25 19:41:12 · 874 阅读 · 0 评论