React+antd开发PC端项目日常小问题集合

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’);

}

未完