1、实现页面跳转 <Link to ={ {
pathname:`跳转地址`,
query:{
携带的数据
}
}}>
2、DailyReportTable 中的onLoad 中的this.props.
没有值,或者不声明的时候 解构赋值出的变量是undefined
3、Antd.Spin 标签中放置内容,显示的时候内容就会在加载中
4、部分逻辑放在封装的组件当中,
5、页面刚一进入产生的逻辑可以放在生命周期函数中componentWillMount。Props 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.productId, time: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;
}