码迷,mamicode.com
首页 > 其他好文 > 详细

项目总结-REACT-1

时间:2017-07-05 01:20:06      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:显示   ops   should   tooltip   obj   产生   dai   profile   led   

1、实现页面跳转 <Link to ={ {

pathname:`跳转地址`

query{

携带的数据

}

}}>

 

2、DailyReportTable 中的onLoad 中的this.props.  

没有值,或者不声明的时候 解构赋值出的变量是undefined

3、Antd.Spin 标签中放置内容,显示的时候内容就会在加载中

4、部分逻辑放在封装的组件当中,

5、页面刚一进入产生的逻辑可以放在生命周期函数中componentWillMountProps change改变就用componentWillReceiveProps,State change 就用shouldComponentUpdate

6

Object.prototype.toString.call(data[datakey]) == [object Array]

 

7、关于React,存在constructor 就必须加super  ,如果需要在constructor中使用this.props ,就写 super(props)

8、如果需要在URL中拼数据传递参数 可以用this.props.location.query 进行获取

9、判断是否按钮是否禁止: 写一个函数,把数据传入 ,在函数中进行判断,

  isDisable = (list) =>{

            for(let i = o; i<list.length ; i++){

                if(list[i].length == 0){

                    return true

                }else {

                    return false

                }

            }

        }

        let disable = isDisable(list)

 

 

10、浏览器的回退功能

browserHistory.push({
     pathname: `/daily/profile`,
     query: {name: this.state.name, id: this.state.productIdtime:this.state.time}
});

使用browserHistory 这个需要在服务器进行一些配置

 

11、实现表单控件提交

fileChange = () => {
    let fileData = $("#file")[0].files[0];
    if(fileData){
        let file = new FormData();
        file.append(‘file‘, fileData);
        file.append(‘productId‘, this.state.productId);
        file.append(‘recordDay‘, this.state.time);
        this.setState({uploadLoading: true});
        let api = ‘/api/daily/report/import‘;
        $.ajax({
            type: ‘post‘,
            url: api,
            data: file,
            processData: false,
            contentType: false,
            success: this.handleSuccess
        });
    }
};

点击input type = file 的时候 触发上面的事件,发送表单中的数据,实现文件的上传

12、如果要实现Loading效果,就直接把spin 包裹loading的标签,然后用 spinning = true/false 进行判断加载还是不加载

13、判断这个按钮出现还是不出现,可以在render return 之前把按钮的代码写在一个变量中,这个变量可以在判断条件下存取按钮代码,然后在return 中 {变量} 进行解构

14、显示产品名字,超过9个字就显示。。。Tooltip 文字提示

text 传入,text指的是产品名字

render: (text) => {
    if(text.length > 10){
        return (
            <Tooltip title={text}>
                <span>{text.slice(0,9) + ‘...‘}</span>
            </Tooltip>
        );
    }
    return text;
}

项目总结-REACT-1

标签:显示   ops   should   tooltip   obj   产生   dai   profile   led   

原文地址:http://www.cnblogs.com/H5C3XXN/p/7119231.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!