我们一起踩过的坑----react（antd）
1.this问题对应写法
1)
this.handleChange = this.handleChange.bind(this) //如果不写这个，必须要用箭头函数
handleChange(e) {
this.setState({temperature: e.target.value});
}
2)
handleChange=(e)=> {
this.setState({temperature: e.target.value});
}
2.react没有直接的获取大量表单数据的方法，只能一个一个获取，这时候要借助一些第三方的插件，比如antd里面的
if(item.inputType==="daterange"){
const TIMEPICKER=
{getFieldDecorator(field)(
)}
formItemList.push(TIMEPICKER)
}
最后一键获取表单数据
let fieldsValue=this.props.form.getFieldsValue();
3.react的state的异步问题：在React库控制之内时，它就会以异步的方式来执行，否则以同步的方式执行。
也就是你setState的同时，输入设置的state的往往无法同步
state本身的设计是无法直接更改，setState的设计是用来更动state值
4.数据存放问题
当你纯渲染一个组件的时候，你可以接受父级传过来的数据，this.props.data直接使用
在判断哪一个是 state 时，简单地对每一项数据提出三个问题：
1.是否是从父级通过 props 传入的？如果是，可能不是 state 。
2.是否会随着时间改变？如果不是，可能不是 state 。
3.能根据组件中其它 state 数据或者 props 计算出来吗？如果是，就不是 state 。
5.tabs页切换，导航菜单跟着联动
在tabs的onChange函数中调用子组件NavLeft里的方法，将activeKey传过去，在从openKey的键值对中遍历，找到相应的openKeys值，将openKeys传到state中即可。
这时候，请注意，设置过 onOpenChange的里面必须要setState（{openKeys}）,否则点击菜单无法打开；其次，openKeys是一个数组，而并不是字符串
6.动态添加一行表格，里面又是一些表单input问题
制作这个功能的时候，我肯定首选UI的表单方法：
{getFieldDecorator('remember', {
valuePropName: 'checked',
initialValue: true
})(
)}
忘记密码
但是完成之后发现，新增后的表单无法键入，目前还不知道什么原因
所以只能舍弃官网的方法，用循环将input塞进去
获取数据的方法是，只要用户键入数据，将数据暂存在本地，点提交，再将数据融合，一起提交，暂时还没想到其他方法
7.tabs的路由问题
其实当初是想做那种点击NavLeft的菜单，添加路由，自动增加tabs
但是呢，对于刚接触react的新人来说，不知从何下手，看了很多博客，也无法获知有用的方法
所以，迫于无奈，最终的方案是 点击菜单，获取id值，手动添加tabs的panes，然后在根据panes里面的title匹配相应的模板组件，是之加载数据，并没有用到路由的相关技术，
希望以后能改写这段代码···
8.content页下滑，tabs置顶问题
将要滚动判断的部分绑定handScroll函数
handleScroll=(e)=>{
let scrollTop = e.target.scrollTop; //滚动条滚动高度
let scrollHeight = e.target.scrollHeight
let obj =document.getElementsByClassName("ant-tabs-bar")[0]
if(scrollTop>50 && scrollHeight>705){
obj.style.position = 'fixed';
obj.style.top = '0';
obj.style.background='#002140'
obj.style.width='100%'
}else{
obj.style.position = 'static';
}
}
9.使用SuperAgent传输数据
附上干粮：https://www.jianshu.com/p/98b854322260
封装 SuperAgent方法，供后续使用，附上代码
export default class Superagent{
static super(options){
return new Promise((resolve,reject)=>{
superagent
.post(options.url)
.type('form')
.set("datamobile-token",tokenName)
.query(options.query||'')
.send(options.data||'')
.end((req,res)=>{
if(res.status===200){
resolve(res.body)
}else if(res.status===200){
message.info("请求权限不足,可能是token已经超时")
}else if(res.status===404||res.status===504){
message.info("页面不存在。")
}else if(res.status===500){
message.info("后台处理错误。")
}else{
reject(res.body)
}
})
})
}
}
10. RightBar导航锚点实现
{
this.state.cardTitle?
this.state.cardTitle.map((item)=>{
return
}):""
}
将导航绑点scrollToAnchor方法，之所以不用a标签的锚点功能呢，原因有2：一是使用a标签，href中带#号的，react会默认去实现路由跳转；二是要去增加一些Id，比较麻烦
scrollToAnchor = (anchorName) => {
if (anchorName) {
let anchorElement = document.getElementById(anchorName);
if(anchorElement) { anchorElement.scrollIntoView({behavior: 'smooth'})}
}
}
scrollIntoView方法是H5新增方法，具体参数详见传送门：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
11.antd的Select,Cascader,Datepicker的下拉框随着页面的滚动而滚动
这个问题是官方默认相对于页面body定位，只要改为相对于父级定位就可以了
Select,Cascader使用
getPopupContainer={trigger => trigger.parentNode}
Datepicker使用
getCalendarContainer={trigger => trigger.parentNode}
12.antd upload限制文件类型和数量
const props = {
accept:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/vnd.ms-excel",
onChange : () => {
fileList.slice(-1);//限制一个文件数量
},
onRemove : (file) => {
this.setState((state) => {
const index = state.fileList.indexOf(file);
const newFileList = state.fileList.slice();
newFileList.splice(index, 1);
return {
fileList: newFileList,
begin:true,
percent:0,
};
});
},
beforeUpload: (file) => {
this.setState(state => ({
fileList: [file],
begin:false
}));
return false;
},
fileList,
};
常用文件类型：
后缀名 MIME名称
*.3gpp audio/3gpp, video/3gpp
*.ac3 audio/ac3
*.asf allpication/vnd.ms-asf
*.au audio/basic
*.css text/css
*.csv text/csv
*.doc application/msword
*.dot application/msword
*.dtd application/xml-dtd
*.dwg image/vnd.dwg
*.dxf image/vnd.dxf
*.gif image/gif
*.htm text/html
*.html text/html
*.jp2 image/jp2
*.jpe image/jpeg
*.jpeg image/jpeg
*.jpg image/jpeg
*.js text/javascript, application/javascript
*.json application/json
*.mp2 audio/mpeg, video/mpeg
*.mp3 audio/mpeg
*.mp4 audio/mp4, video/mp4
*.mpeg video/mpeg
*.mpg video/mpeg
*.mpp application/vnd.ms-project
*.ogg application/ogg, audio/ogg
*.pdf application/pdf
*.png image/png
*.pot application/vnd.ms-powerpoint
*.pps application/vnd.ms-powerpoint
*.ppt application/vnd.ms-powerpoint
*.rtf application/rtf, text/rtf
*.svf image/vnd.svf
*.tif image/tiff
*.tiff image/tiff
*.txt text/plain
*.wdb application/vnd.ms-works
*.wps application/vnd.ms-works
*.xhtml application/xhtml+xml
*.xlc application/vnd.ms-excel
*.xlm application/vnd.ms-excel
*.xls application/vnd.ms-excel
*.xlt application/vnd.ms-excel
*.xlw application/vnd.ms-excel
*.xml text/xml, application/xml
*.zip aplication/zip
*.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet