我们一起踩过的坑----react（antd）

Dear 丶 2022-04-02 09:55 267阅读 0赞

1.this问题对应写法

this.handleChange = this.handleChange.bind(this) //如果不写这个，必须要用箭头函数

handleChange(e) \{

this.setState(\{temperature: e.target.value\});

handleChange=(e)=> \{

this.setState(\{temperature: e.target.value\});

2.react没有直接的获取大量表单数据的方法，只能一个一个获取，这时候要借助一些第三方的插件，比如antd里面的

if(item.inputType==="daterange")\{

const TIMEPICKER= <FormItem label=\{label\} key=\{field\}>

\{getFieldDecorator(field)(

)\}

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

\{getFieldDecorator('remember', \{

valuePropName: 'checked',

initialValue: true

\})(

)\}

</FormItem>

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

所以只能舍弃官网的方法，用循环将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 <li onClick=\{()=>this.scrollToAnchor(item)\} key=\{item\}>\{item\}</li>

\}):""

将导航绑点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

我们一起踩过的坑----react（antd）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关踩过的坑

相关 Monorepo 的这些坑，我们帮你踩过了！

相关那些年，我们一起踩过的坑（前端防翻车指南）

相关 C语音基础-----那些年我们踩过的坑（一）

相关架构真经 | 那些年，我们踩过的缓存坑

相关那些年我们踩过的Hive坑

相关我们一起踩过的坑----react（antd）

相关那些年，我们踩过的坑---vuejs对接后端

相关那些年，我们踩过的Batch_normlization的坑

相关 mysql之我们终将踩过的坑（优化）