1. Ant-Design

1.1 时间控件清空日期内容

集合网上找的方法总结有三种：

使用form表单包裹，可采用清空表单的方式清空日历组件，this.props.form.resetFields()
若是单独写的日历组件，则可以通过设置一个key，然后在点击重置时修改key的值（看了网上一些博客都是这样写的），原理是给rangePicker控件添加key属性，点击重置时，修改key的值，如(new Date()).getMilliseconds()，相当于重新渲染控件，达到让控件重置的功能
值得注意的是：每次传入的给key的值要不同，不然会渲染出多个rangePicker控件，或者是重置效果只能实现一次

this.state = {
  keyValue: '',
};
resetDate = () => {
  // 获取当前时间毫秒数
  this.setState({ keyValue: (new Date()).getMilliseconds() });
};

<Space>
  <RangePicker key={this.state.keyValue} onChange={this.onChange} />
  <Button disabled={!btime || !etime} type="primary" onClick={this.onWorkSearchClick}>
    查询
  </Button>
  <Button type="default" onClick={this.resetDate}>
    重置
  </Button>
</Space>

使用value值绑定默认值，每次点击重置时重置value的值（需要用到Moment.js 中文网 (momentjs.cn)）

import Moment from "moment"

this.state = {
  keyValue: '',
};
resetDate = () => {
  // 初始化
  this.setState({ keyValue: '' });
};

<Space>
  <RangePicker 
    value={ Moment(this.state.keyValue).isValid() ? Moment(this.state.keyValue) : null} 
    onChange={this.onChange} 
  />
  <Button disabled={!btime || !etime} type="primary" onClick={this.onWorkSearchClick}>
    查询
  </Button>
  <Button type="default" onClick={this.resetDate}>
    重置
  </Button>
</Space>

2. 导入导出Excel表格

转至原文：「项目 📝 」React实现导入导出Excel文件 - 掘金 (juejin.cn)

2.1 表示层

这里我是使用的是antd的Upload上传组件

引用antd部分代码

import { Button,Table,Upload } from 'antd';

<Upload {...props} fileList={state.fileList}>
    <Button type="primary" >Excel导入</Button>
</Upload>

<Button type="primary" onClick={handleExport}>Excel导出</Button>

2.2 业务层

首先分析一下工作：

导入Excel工作：用户上传Excel表格，将表格内容转换为json对象方便后端处理，后端将数据存储数据库；
导出Excel工作：获取后端json格式数据，前端将数据转换为sheet工作薄对象，生成的对象转换为Excel表格下载导出；

下面就是技术层面的细节

2.3 核心插件xlsx

安装xlsx：npm install xlsx --save-dev

主要介绍用到的核心api：

XLSX.read(data,type) // 解析Excel数据
workbook.Sheets[workbook.SheetNames[0]] // 取到workbook对象中的第一个sheet表，规定用户只有一个sheets，不理解workbook的下面有解释
XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {header:1,defval:’’}）// 将工作簿对象转换为JSON对象数组，注意defval不设置‘’则默认值为empty
XLSX.utils.json_to_sheet(json) // 将json对象转换为工作簿对象

// workbook 理解：
{
    SheetNames: ['sheet1', 'sheet2'],
    Sheets: {
        // worksheet
        'sheet1': {
            // cell
            'A1': { ... },
            // cell
            'A2': { ... },
            ...
        },
        // worksheet
        'sheet2': {
            // cell
            'A1': { ... },
            // cell
            'A2': { ... },
            ...
        }
    }
}

2.4 excel 导入功能

核心代码

const f = file;
const reader = new FileReader();
reader.onload = function (e) {
    try{
        const datas = e.target.result;
        const workbook = XLSX.read(datas, {type: "binary",}); //解析datas
        const first_worksheet = workbook.Sheets[workbook.SheetNames[0]]; //是工作簿中的工作表的第一个sheet
        const jsonArr = XLSX.utils.sheet_to_json(first_worksheet, {header: 1,defval:''}); //将工作簿对象转换为JSON对象数组
        handleImpotedJson(jsonArr)// 数组处理
        message.success('Excel上传解析成功！')
    }catch(e){
      message.error('文件类型不正确！或文件解析错误')
    } 
};
reader.readAsBinaryString(f);

理解：

FileReader对象实例化file对象在onload事件里进行处理

XLSX.read 解析data

XLSX.utils.sheet_to_json(first_worksheet, {header: 1,defval:''}) 将解析出的工作簿对象转化为JSON对象

2.5 excel 导出功能

核心代码：

 const downloadExcel = () =>{
    const json = handleExportedJson(data)
    const sheet = XLSX.utils.json_to_sheet(json);
    openDownloadDialog(sheet2blob(sheet,"Sheet1"), "下载文件.xls")
}
const handleExportedJson = (array) =>{...}  // 处理Json数据
const openDownloadDialog = (url, saveName) =>{...} // 打开下载
const sheet2blob = (sheet, sheetName) =>{...} // 转成blob类型

理解：

得到处理后的json格式数据
XLSX.utils.json_to_sheet(json) 转换成sheet工作簿对象
sheet2blob(sheet,saveName) 将工作簿对象转换成 blob
openDownloadDialog 创建blob地址通过<a>标签实现下载动作

2.6 excel 导出插件（js-export-excel）