我们一起踩过的坑----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= < FormItem label= { label } key= { field } >

{ getFieldDecorator( field)(

< RangePicker locale= { locale } style= {{ width: 225} } />

) }

</ FormItem >

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的表单方法：

< FormItem >

{ getFieldDecorator( 'remember', {

valuePropName: 'checked',

initialValue: true

})(

< Checkbox >记住密码 </ Checkbox >

) }

< span >忘记密码 </ span >

< Button style= {{ width: '100%'} } type= "primary" onClick= {this. handleSubmit } >登录 </ Button >

</ FormItem >

但是完成之后发现，新增后的表单无法键入，目前还不知道什么原因

所以只能舍弃官网的方法，用循环将input塞进去

获取数据的方法是，只要用户键入数据，将数据暂存在本地，点提交，再将数据融合，一起提交，暂时还没想到其他方法

--------------------------------------------------------------------------------

2019-7-24更新，

之前的做法容易在数据提交时出错，现在改为添加一行，弹出一个表单，填写之后，再将数据填充到页面上，避免了动态添加表单无法输入的问题

 

7.tabs的路由问题 

其实当初是想做那种点击NavLeft的菜单，添加路由，自动增加tabs

但是呢，对于刚接触react的新人来说，不知从何下手，看了很多博客，也无法获知有用的方法

所以，迫于无奈，最终的方案是 点击菜单，获取id值，手动添加tabs的panes，然后在根据panes里面的title匹配相应的模板组件，是之加载数据，并没有用到路由的相关技术，

希望以后能改写这段代码···

-----------------------------------------------------------------------------

2019-7-24更新，

react是SPA单页面应用，框架本身就不太适合做复杂的tab页面的动态数据切换，之后需求改为单页面加载···

 

 8.content页下滑，tabs置顶问题

< Col span= "20" className= "main" onScroll= {this. handleScroll } >

将要滚动判断的部分绑定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 < li onClick= {() =>this. scrollToAnchor( item) } key= { item } > { item } </ li >

}): ""

}

将导航绑点scrollToAnchor方法，之所以不用a标签的锚点功能呢，原因是使用a标签，href中带#号的，react会默认去实现路由跳转

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名称

*.3 gpp audio/3 gpp, video/3 gpp

*. 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

 

转载于:https://www.cnblogs.com/NatChen/p/10110077.html