zoukankan      html  css  js  c++  java
  • 我们一起踩过的坑----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={{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={{'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名称
    *.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
  • 相关阅读:
    OpenStreetMap/Google/百度/Bing瓦片地图服务(TMS)
    【APM】Pinpoint 监控告警(三)
    【APM】Pinpoint 使用教程(二)
    【APM】Pinpoint 安装部署(一)
    【HBase】HBase 单机版安装及使用
    【SpringBoot】SpringBoot快速入门(一)
    【Java】Swagger快速入门
    【WebSocket】WebSocket快速入门
    【JS】AJAX跨域-被调用方与调用方解决方案(二)
    【JS】AJAX跨域-JSONP解决方案(一)
  • 原文地址:https://www.cnblogs.com/NatChen/p/10110077.html
Copyright © 2011-2022 走看看