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

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)(
                            <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