react项目经验
调用后返回上一页&&跳转至当前页
this.props.history.goBack(); 返回
this.props.history.push("/index/setting/basicsetting"); 跳转
this.props.history.go(-1) 跳转
当使用时出现以下错误Cannot read property 'push' of undefined,
因为父组件调用子组件定义的跳转事件时,要传递history，这里history未定义
(比如app.js这个组件，一般是首页，不是通过路由跳转过来的，而是直接从浏览器中输入地址打开的，如果不使用withRouter此组件的this.props为空，没法执行props中的history、location、match等方法)
解决方法：
import React from "react";
import {withRouter} from "react-router-dom"; //第一，引入withRouter
class MyComponent extends React.Component {
...
myFunction() {
this.props.history.push("/some/Path");
}
...
}
export default withRouter(MyComponent); //第二，不要在上面暴露模块，在这里使用withRouter暴露模块
详细可见：react-router v4 使用 history 控制路由跳转 https://github.com/brickspert/blog/issues/3
调用后重新渲染当前页&&跳转至当前页
this.props.history.go(0) 跳转
state={
visible:false
}
handleClick=()=>{
this.setState({
visible:true
});
}
this.setState(this.state) //此语句执行过后页面重新渲染state。这里需要注意的事重新渲染会将visible渲染成state里的false,而不是handleClick里的true
//渲染会把state里的内容全部重新渲染，即执行this.setState(state)之后，visible会被重新渲染为false，若需要visible为true，可以在渲染之后重新定义状态，如下重新定义
this.setState({this.state})
this.setState({
visible:true
});
定义componentWillMount=async()=>{
this.getData(); //重新渲染当前页面
} // 使用：调用this.getData();函数即可
async getData(){
代码段
}
代码解析
let {state}=this; // 即 let state = this.state;
let res = await api.SettingGetInfo(this.props.match.params) //获取列表里当前元素的id值，此方法需要注意有一个必要条件在route页面里的route添加 /:id
//即<Route path="/index/setting/basicsetting/:id" component={BasicSettting} />
rowKey={record=>record.id} //表格table中的每个记录应该有唯一的“key”支持，或者将“rowKey”设置为唯一的主键，否则会报错。这里是给表格设置rowKey
点击按钮复制相关内容(这里以复制链接为例)
npm i --save copy-to-clipboard //首先安装相关包
import copy from 'copy-to-clipboard'; //引入模块
render:(a, code, index)=>{
return <span>
<a href="# " onClick={()=>{this.copyLink(code)}}>复制链接</a>
</span>
}
copyLink=(code)=>{
copy(`https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${code.info}`)
message.success("链接复制成功",2.5)
}
三目运算符的嵌套使用
正常使用：code.type===1?(adate<bdate?atime:btime):<span className="text-success">永不</span>
react里：{title:"时间",dataIndex:"Time",render(a,code,index){
let adate=...;
let bdate=...;
var overtime=<span className="text-danger">时间不足</span>;
var forevertime=<span className="text-success">永久</span>
var times=`${date.getFullYear()}-${date.getMonth() + 1<10?"0"+(date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?"0"+date.getDate():date.getDate()} ${date.getHours()<10?"0"+date.getHours():date.getHours()}:${date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes()}:${date.getSeconds()<10?"0"+date.getSeconds():date.getSeconds()}` //将时间戳转换为日期格式
return <span>{code.type===1?(adate<bdate?overtime:times):forevertime}</span> //嵌套使用
}}
======================================================================================================================================================
接口部分
读懂接口文档
/api/wechat/code/:officialId/:qrcodeId 带冒号，动态数据：`${base}/api/wechat/code/${localStorage.getItem("listid")}/${params.id}` //这列的:qrcodeId需要使用${params.id}动态写入，params即数组
/api/wechat/statistics/:officialId/code 不带冒号，静态的：`${base}/api/wechat/statistics/${localStorage.getItem("listid")}/code` //这里的qrcode直接写上去就可以
参数问题
request<T = any>(config: AxiosRequestConfig): AxiosPromise<T>; //request 一个参数 config
get<T = any>(url: string, config?: AxiosRequestConfig): AxiosPromise<T>; //get 两个参数 url config
delete(url: string, config?: AxiosRequestConfig): AxiosPromise; //delete 两个参数 url config
head(url: string, config?: AxiosRequestConfig): AxiosPromise; //head 两个参数 url config
post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise<T>; //post 三个参数 url data config
put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise<T>; // put 三个参数 url data config
patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise<T>; // patch 三个参数 url data config
参数解释 ：url —— 请求地址
data——发送给服务器的请求数据
config——配置，一般都是固定格式
举个栗子：
export default{
async codeDesign(params){
return await axios.put(`${base}/api/code/${localStorage.getItem("listid")}/${params.id}`, params,{ //url data
headers:{ //config 一般都是固定格式
"token":cookie.load("usertoken")
}
}).then((res)=>{
return res.data;
});
},
async codeExtend(params){
return axios.post(`${base}/api/code/${localStorage.getItem('listid')}/${params.id}/extend`,{},{ //这里data就没有传参，而是用{}表示
headers:{
"token":cookie.load("usertoken")
}
}).then((res)=>{
return res.data;
});
},
async codeGetMsg(params){
return await axios.get(`${base}/api/code/${localStorage.getItem("listid")}/${params.id}`,{
params, **//如果是get delete两个参数的这种，是没有data参数的，那么params不能放在data里，就可以放在config里**
headers:{
"token":cookie.load("usertoken")
}
}).then((res)=>{
return res.data;
});
},
}
注意：需要的参数，一个都不能少，data如果不需要传，设置为{}都行，也不能不传
axios实战举例
state={
//上传接口的参数
title:"",
author:"",
digest:"",
content:"",
piclist:[], //从服务器获取的图片数组
picTotal:2,
filter:{
isloading:false,
type:"image",
flag:2,
page:1,
pageSize:18,
},
}
//上传pictextData数据到服务器
addPictext=async()=>{
let {title,author,digest,content}=this.state.pictextData;
if(!title){
this.setState({
pictextTitleRemind:true
})
return;
}else{
this.setState({
pictextTitleRemind:false
})
}
if(!(/^(((https?):\/\/|\w+(\.\w+)+)(:\w+)?).*/.test(contentSourceUrl))){ //匹配正则
this.setState({
urlRemind:true
})
return;
}else{
this.setState({
urlRemind:false
})
}
let data=await api.pictextAdd({
title,
author,
digest,
content,
})
if(data.code!==0){
console.log(api.stateCode[data.code]);
return;
}
if(data.code===0){
message.success("保存成功！",3);
this.props.history.push("/index/setting/pictextIndex");
}
}
componentWillMount=async()=>{ //render加载之前就获取到图片信息
this.getData();
}
//获取图片的接口
async getData(){
this.setState({
filter: Object.assign(this.state.filter, {
isloading: true
}),
});
let res=await api.picGetList(this.state.filter)
this.setState({
filter: Object.assign(this.state.filter, {
isloading: false
}),
if(res.code===0){
this.state.picTotal=res.data.total;
this.state.piclist=res.data.data;
}else{
console.log(api.stateCode[res.code]);
}
this.setState(this.state); //重新渲染页面
}
//分页
onChangePage = (page = 1, pageSize = 18) => {
this.setState(
Object.assign(this.state.filter, {
page,pageSize
})
);
this.getData(); //重新加载getData函数，为了重新渲染页面
}
//删除图片接口
deletePic=async(item)=>{
this.setState({
imgDelete:false,
picImgDelete:false,
})
let data=await api.picDelete({
id:item.id, //获取需要删除的图片的id
})
if(data.code!==0){
console.log(api.stateCode[data.code]);
return;
}else if(data.code===0){
this.onChangePage();
message.success(`删除成功！`,2.5);
}
this.getData();
}
<Pagination hideOnSinglePage onChange={this.onChangePage} current={this.state.filter.page} pageSize={this.state.filter.pageSize} total={this.state.picTotal} /> //antd分页页标
受控组件和不受控组件
在HTML中，<textarea> 的值是通过子属性设置的。在React中，需要通过value设置。我们可以通过添加事件属性onChange监听内容的变化，onChange会在下列情况下被触发：
input或者textarea的内容改变
input的checked状态改变
select的状态改变
【受控组件】
设定了value的input就是一个受控组件。input里会一直展现这个值，用户的任何输入都是无效的。如果你想随着用户的输入改变，使用onChange事件，或者将value改为defaultValue
【非受控组件】
value没有值或者值设为null的input是一个不受控组件。用户的任何输入都会反映到输入框中
这个时候也可以监听onChange事件，内容的改变也会触发事件。
可以通过defaultValue给input设置默认值
指定编辑(如删除，更新等)
有一种需求是点击table中当前tr的“编辑”按钮后，跳转到新的编辑页面编辑当前tr的信息。
这种情况是需要动态获取id的
方法如下：
1、在route.js即路由页面将编辑页面的路由给一个/:id，如下
<Route path="/index/setting/code/code-edit/:id" component={codeEdit} /> //注意是/:id /别忘了
2、列表页面编辑按钮的Link跳转给一个动态id(该id由后端接口数据里给出)，如下
<Link to={`/index/setting/code/code-edit/${codelist.id}?id=${codelist.id}`} className="mr-10px">编辑</Link>
3、在编辑页面对接接口时，参数应使用this.props.match.params
async getPictextData(){
let res =await api.pictextGetEdit(this.props.match.params) //这里传入的是this.props.match.params
if(res.code===0){
state.pictextEditData=res.data;
}else{
console.log(api.stateCode[res.code]);
}
this.setState(state)
}
提个醒：this.props.match.params是从另一个页面通过路由带到当前页面的数据。你可以在任何地方使用它。
这也表明了，这个传递的数据，不一定得是id，也可以是其他的数据。比如name,size等，通过/:name就可以传递
就比如说console.log(this.props.match.params)打印出来的是{"id":"1"}。你就可以通过this.props.match.params.id来获取到1。
但有一点，这个1可能是字符串类型的。和number类型的不是一个数据类型。所以在做判断是否相等的时候要注意，用==而不用===
在控制台打印出的数字，黑色的就是string类型。蓝色的是number类型
使用搜索框搜索数据(后端接口没有设置好，全部由前端操作)
state={
filter: {
name:"",
total: 0,
page:1,
pageSize:20,
}
}
handleProductSearch=(e)=>{
this.setState(
Object.assign(this.state.filter,{
name:e.target.value, //在对接接口之后。若想根据名称name搜索，将搜索框的event赋值给filter里的name便可
})
);
this.setState(state); //重新渲染页面
}
<Search
placeholder="请输入产品名称"
onSearch={this.handleProductSearch}
/>
使用搜索框搜索数据,（后端接口已经设置好的情况下）
state={
filter: {
name:"",
total: 0,
page:1,
pageSize:20,
}
}
productName=(e)=>{
this.setState(
Object.assign(this.state.filter,{
name:e.target.value, //在对接接口之后。若想根据名称name搜索，将搜索框的值赋值给filter里的name便可
})
);
}
handleProductSearch=(e)=>{
this.productInfoGet(); //调用获取产品信息的接口。此时的name已经是搜索的name。给接口接口会返回搜索后的结果
}
<Search
placeholder="请输入产品名称"
onChange={this.productName}
onSearch={this.handleProductSearch}
/>
======================================================================================================================================================
localStorage解释
localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
localStorage.getItem("key");//获取名称为“key”的值
localStorage.removeItem("key");//删除名称为“key”的信息。
localStorage.clear();//清空localStorage中所有信息
state里的filter里得数据怎么setState?(使用Object.assign相关知识)
this.state={
visible:false,
filter: {
isloading: false,
name:"",
page:1,
pageSize:20,
}
}
这里的isloading怎么设置为true呢？
handleClick=()=>{
this.setState({
filter:Object.assign(this.state.filter,{
isloading:true
}),
});
}
动态添加css样式(如通过点击添加css样式)
state={
select: "",
}
handleSelect=(item)=>{
this.setState({
select: item.id
})
}
<div onClick={()=>{this.handleSelect(item)}} style={{border:this.state.select===item.id?"1px solid #28a745":null}}></div>
动态添加一组可编辑框(如点击添加按钮后会添加一个可输入数值的图文框)
思路：
1、state一个数组如Data，将数组的值与图文框绑定起来，通过map函数渲染到页面
2、当点击添加按钮后，执行函数，往list数组里push一组数据，数据会自动渲染到页面，即实现了动态添加图文框的功能
3、通过编辑数组的值即可动态编辑图文框里的内容
4、动态删除可以通过用数组的splice操作数组的下标index来实现删除。
总结：通过操作数组的数据来实现图文框的增删改，而不是通过dom操作
举个例子：
state={
title:"", //上传接口的参数
author:"",
digest:"",
content:"",
Data:[{id:"1",title:"",author:"",digest:"",content:""}],
boxid:"1", //定义图文框的id
msg:[],
changeBorder:"",
}
//添加图文框数组
addBox=()=>{
this.setState({
boxid:this.state.boxid++,
})
this.state.Data.push({id:`${this.state.boxid}`,title:"",author:"",digest:"",content:""})
this.setState(this.state)
}
//删除图文框
listbox_Delete=(item)=>{
let index= this.state.Data.indexOf(item) //获取需要删除的图文框的index
this.state.Data.splice(index,1) //使用splice方法删除数组数据
}
//向上移动图文框(通过改变替换index来实现)
listbox_up=(item)=>{
let index=this.state.Data.indexOf(item)
let arr=this.state.Data
let index2=index-1
if(index2!==0){
arr[index]=arr.splice(index2,1,arr[index])[0]
}
}
//向下移动图文框
listbox_down=(item)=>{
let index=this.state.Data.indexOf(item)
let arr=this.state.Data
let index2=index+1
if(index2!==arr.length){
arr[index]=arr.splice(index2,1,arr[index])[0]
}
}
//图文框数组map方式渲染到页面
{
this.state.Data.map((item,index)=>{
if(item.id==1){ //item.id==1时是主图文框的样式，否则是副图文框的样式
return <div onClick={()=>{this.handleSelect(item)}} key={index}> //map语法必须要带有key={index}，不然会报错
<div >
<img src={item.picUrl} alt="" style={{width:"100%",height:"100%"}}/>
</div>
{item.title?<div className="indexbox_mask">{item.title}</div>:null}
</div>
}else{
return <div key={index} style={{border:this.state.changeBorder===item.id?"2px solid #28a745":null}} onClick={()=>{this.handleSelect(item)}}> //handleSelect,点击后选取当前框并与输入框绑定
<h4 style={{height:21}}>{item.title}</h4>
<div className="listbox_content">
<div className="listbox_img">
<img src={item.picUrl} alt=""/>
</div>
</div>
<div className="listbox_mask">
<Icon type="up"className="listbox_icon mr-10px" onClick={()=>{this.listbox_up(item)}} /> //图文框位置上移
<Icon type="down" className="listbox_icon" onClick={()=>{this.listbox_down(item)}} /> //图文框位置下移
<div className="float-r">
<Icon type="delete"className="listbox_icon" onClick={()=>{this.listbox_Delete(item)}}/> //删除图文框
</div>
</div>
</div>
}
})
}
<Button onClick={this.addBox}></Button> //添加图文框
//点击图文框后选定当前图文框，并与Input输入框绑定，之后在Input里输入的值都会存在当前数组里。再点击其他图文框后执行同样的操作，最后所有图文框里采集的数据会全部存在Data数组里，通过接口将数组传入后台，再在另一个页面获取并渲染该组数据，即完成了前后端的一个交接流程。
handleSelect=(item)=>{
console.log(item)
this.setState({
msg:item,
changeBorder:item.id,
title:item.title,
author:item.author,
digest:item.digest,
content:item.content,
})
}
handleGetTitle=(e)=>{ //与Input标签之间进行双向绑定
this.setState({
title:e.target.value,
})
this.state.msg.title=e.target.value; //使得输入框与当前选定的文本框绑定
}
<Input onChange={this.handleGetTitle} id={this.state.msg.id} value={this.state.title} placeholder="请输入标题"/>
antd图片上传
//判断用户上传文件的格式，不符合提醒用户，符合则返回true
function beforeUpload(file) {
if(file.type!=='image/png'&&file.type!=='image/jpeg'&&file.type!=='image/jpg'&&file.type!=='image/gif'){
message.error("上传失败！仅支持jpeg,png,jpg,gif图片格式");
return false;
}else if(file.size/1024/1024>4){
message.error("上传失败！仅支持大小在4M以内的图片上传");
return false;
}
return true;
}
//上传图片接口
UploadImg=()=>{
let self= this;
return {
name: 'media',
action: ` `, //这里写服务器地址
headers: { //设置请求头
token: cookie.load('usertoken'),
},
onChange(info) {
self.setState({
uploadWaiting:true
})
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
self.setState({
uploadWaiting:false,
})
}
if (info.file.status === 'done') {
message.success(`${info.file.name}上传成功！`);
self.setState({
uploadWaiting:false,
})
self.getData()
} else if (info.file.status === 'error') {
message.error(`${info.file.name}上传失败！`);
self.setState({
uploadWaiting:false,
})
}
},
}
}
<Upload {...this.UploadImg()} beforeUpload={beforeUpload}><Button>上传图片</Button></Upload>
列表数据相关操作（table）
constructor(props){
super(props);
this.columns=[
{title:"",
dataIndex:"ticket",
width:66,
render:(record)=>(<img src={record} width="50px" alt="" />)
},
{title:"产品名称",dataIndex:"name"},
{title:"产品类型",dataIndex:"type", render(a, productlist, index){
return <span>{productist.type || "无"}</span>
}},
{title:"对应编码",dataIndex:"keyword"},
{title:"生产时间",dataIndex:"createtime"},
{title:"到期时间",dataIndex:"expiretime",render(a,productlist,index){
let date=new Date(new Date(productlist.expireTime).getTime());
let nowdate=new Date(new Date().getTime());
var overtime=<span className="text-danger">已过期</span>;
var forevertime=<span className="text-success">永不</span>
var times=`${date.getFullYear()}-${date.getMonth() + 1<10?"0"+(date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?"0"+date.getDate():date.getDate()} ${date.getHours()<10?"0"+date.getHours():date.getHours()}:${date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes()}:${date.getSeconds()<10?"0"+date.getSeconds():date.getSeconds()}`
return <span>{productlist.mode===1?(date<nowdate?overtime:times):forevertime}</span>
}},
{title:"操作",
dataIndex:"operation",
key:"operation",
width:225,
render:(a, qrcodelist, index)=>{
return <span>
<a href="# " className="mr-10px" onClick={()=>{this.copyLink(qrcodelist)}}>复制链接</a>
<a href={`${productlist.ticket}`} target={"_blank"} download={`${productlist.name}`} className="mr-10px">下载产品</a>
<Link to={`/index/setting/product/product-edit/${productlist.id}?id=${productlist.id}`} className="mr-10px">编辑</Link>
{productlist.mode===2 ? <a href="# " onClick={()=>{this.showModal2(productlist)}}>删除</a> : <a href="# " onClick={() => {this.extendProduct(productlist)}}>延时上架</a>}
</span>
}
},
];
this.state={
visible:false,
visible2:false,
productlist:[],
filter: {
isloading: false,
name:"",
total: 0,
page:1,
pageSize:20,
}
}
}
<Table
columns={this.columns}
dataSource={this.state.productlist}
rowKey={record=>record.id} //表中的每个记录应该有唯一的“key”支持，或者将“rowKey”设置为唯一的主键，否则会报错。这里是给表格设置rowKey
pagination={{onChange:this.onChangePage, current: this.state.filter.page, pageSize: this.state.filter.pageSize , total: this.state.filter.total }} />
注意：这里涉及到两种render写法，两种写法的this指向不同，其他效果差不多
1、render:(a,b)=>{
let time=a,
let overtime=b,
return <div>......</div>
}
2、render(a,b){
let time=a,
let overtime=b,
return <div>......</div>
}
滚动监听及回到顶部
state={
backTop:false,
backTopShow:false,
}
componentWillMount=()=>{
window.addEventListener("scroll",this.handleScroll,true) //滚动监听
}
handleScroll=()=>{
if(document.documentElement.scrollTop>1000){
this.setState({
backTopShow:true, //当滚动到距离顶部1000px的距离时，“回到顶部”按钮显示
})
}else{
this.setState({
backTopShow:false,
})
}
if(document.documentElement.scrollTop===0){ //当滚动到 0时，清除定时器
clearInterval(this.scrollTimes)
}
}
backToTop=()=>{
if(document.documentElement.scrollTop>0){
this.scrollTimes=setInterval(()=>{
document.documentElement.scrollTop=document.documentElement.scrollTop-60;
},5)
}
}
{this.state.backTopShow?<Button onClick={this.backToTop}>回到顶部</Button>:null} //“回到顶部”按钮
关于接口调用函数的写法
间接调用，被动触发式用这种写法，这种写法用onClick等主动触发可能会引起Cannot read property 'setState' of undefined错误
async userInfoGet(){
let res=await api.getUserInfo()
if(res.code===0){
this.setState({
userNickname:res.data.nickname
})
}else{
console.log(api.stateCode[res.code]);
}
}
componentWillMount(){
this.userInfoGet()
} //在别的函数里间接触发
直接调用，主动触发式如onClick等，用这种写法
userInfoGet=async()=>{
let res=await api.getUserInfo()
if(res.code===0){
this.setState({
userNickname:res.data.nickname
})
}else{
console.log(api.stateCode[res.code]);
}
}
<Button onClick={this.userInfoGet}></Button> //主动调用
将React.Component外部的代码移入到其内部
外部：
const props = {
name: 'file',
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
headers: {
authorization: 'authorization-text',
},
onChange(info) {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
};
export default class Demo extends React.Component{}
内部：
export default class Demo extends React.Component{
state={}
pluginZipUpload=()=>{
let self=this; //这里改动 let self=this
return{ //这里改动return
name: 'plugin',
action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
headers:{
authorization: 'authorization-text',
},
onChange(info) {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
self.setState({
pluginAddFile:Object.assign(self.state.pluginAddFile,{ //这里this换成self
plugin: info.file.originFileObj
})
})
console.log(self.state.pluginAddFile.plugin)
} else if (info.file.status === 'error') {
message.error(`${info.file.name}上传失败`);
}
},
}
};
}
如何知道函数里需要传几个参数或者判断函数里有几个参数
es5里可以用arguments打印
es6里可以用拓展运算符...a方法
在函数里写入...params
handleUpload=(...a)=>{}
console.log(...a)即可打印出来里面需要的参数
可搭配debugger使用
