1、antd的Modal使用 confirm() 快捷地弹出确认框,提示的content信息写入react标签,可换行等
confirm({
content: (<p><span>{msg}span><br /><span>{msg2}span>p>),
onOk() {},
onCancel() { },
});
2、react使用window.open()打开新页面地址栏传参,可以直接拼接,新页面可以使用this.props.location.query接收。
window.open('./test?id=1')
//接收
let id = this.props.location.query.id
3、使用antd的Upload组件上传文件,限制只能上传一条,可以通过beforeUpload方法实现
beforeUpload = (file) => {
if (this.state.reportFileList.length > 0) {
message.error("最多只可上传一个文件!")
this.initFileData()
return false;
}
}
上面的方法是通过上传文件后,有一个自定义的reportFileList数组,在beforeUpload方法内,判断该数组是否已经有内容,如果已经有了内容,在该方法内return false则可以中断上传。
//上传文件操作
handleChangePlan_report = (info) => {
if (info.file.status === 'done') {
message.success(`${info.file.name} 上传成功`);
let data = info.file.response.data;
data = this.formatFiledata(data)
if (data.length > 1) {
data.shift()
} //删掉
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 上传失败`);
}
}
4、记录一个上传文件返回后格式化的方法
// 上传返回格式化
formatFiledata = (fileList) => {
let temp = []
for (let i = 0; i < fileList.length; i++) {
temp.push({
uid: fileList[i].xh,
name: fileList[i].name,
status: 'done'
})
}
return temp
}
5、兼容谷歌以及IE的打印方法
IE浏览器有其自带的打印方法,谷歌则使用window.print()方法即可,但为了同时兼容谷歌以及IE,最好在一个新的页面打开要打印的部分,因为IE浏览器的打印会将页面没有设置不可打印的部分全部打印,如果内容太多,每一个元素都添加不可打印样式比较麻烦,所以最好还是在新页面打开。另外,浏览器打印的方法还有其他办法,自己选择。
下面贴上一段代码。
<div style={{padding:'20px 0'}}>
<center className="Noprint" > //Noprint设置样式为不需打印部分
//object标签为IE浏览器打印必需的标签
<object id="factory" viewastext='true' style={{ display: 'none' }}
classID="clsid:1663ed61-23eb-11d2-b92f-008048fdd814"
codebase="../WSJSP/spc/smsx.cab#Version=7,0,0,8">
</object>
<object id="WebBrowser" classID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" style={{ height: 0, width: 0 }}>
</object>
<input type="button" style={{ marginRight: 8 }} value="打印" onClick={() => this.printOpeation(6)} />
<input type="button" style={{ marginRight: 8 }} value="打印预览" onClick={() => this.printOpeation(7)} />
<input type="button" value="页面设置" onClick={() => this.printOpeation(8)} />
<hr className="Noprint" align="center" size="1" width="100%" noshade=""></hr>
</center>
//使用了js动态追加了表格
<table id="tdExportData" style={{ margin: 'auto' }}>
<tbody>
<tr><td id='testtable'>
</td></tr>
</tbody>
</table>
</div>
//以上为react的jsx代码
//将谷歌浏览器打印的方法封装起来
print = (id) => {
//获取传入的需要需要打印部分的ID
var newstr = document.getElementById(id).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = newstr;
window.print();
document.body.innerHTML = oldstr;
window.location.reload();
}
//点击打印按钮等的事件方法
printOpeation = (print) => {
//只拿打印按钮举例
switch (print) {
case 6:
//点击打印
//判断是否为IE浏览器
if (!!window.ActiveXObject || "ActiveXObject" in window) {
//如果是IE浏览器,执行下面的方法
document.getElementById("factory").printing.portrait = false; //设置打印方向为横向
document.all.WebBrowser.ExecWB(6, 1)
} else {
//如果不是IE浏览器,那么就执行封装的window.print()方法
this.print('tdExportData')
}
break;
default:
break;
}
}
document.all.WebBrowser.ExecWB(7, 1)是IE自有的打印方法,后面括号里面的值为(6,1)时是打印;(7,1)是打印预览;(8,1)是页面设置,还有很多其他的方法,可以自行百度一下。
//不需要打印的部分设置样式
@media print {
.noprint {
display: none
}
}
// 日期限制
const disabledDate = (current) => {
// 1、限制只能选择当前月份的日期并且今天之前的日期不可选择
// return (current && current< moment(newDate)) || (current && current > moment(nexDate));
// 2、限制今天之前的日期不能选择
return current && current < moment(rjDate);
// 3、限制只能选择当天的时间
// return current < moment(new Date()) || current > moment().endOf(‘day’);
}
未完