之前在刷github的时候无意间看到某个大佬主页上的一句话：
“最痛苦的时候，往往是你收获最多的时候”
这句话一下子就戳到我了，作为一个前端小菜鸟，大三出来找实习，两个星期学习了React以后就接收到了第一个开发的任务
一开始以为应该不会很难，只要在对的地方放好组件就好，毕竟antd里面都是封装好的组件
压根就不知道还要绑定时间，当组长跟我说要绑定时间的时候一瞬间我是愣住了的，这咋绑定嘛
一开始我想的是一个按钮同时绑定两个事件，后来感觉不对，应该是起始一个绑定，结尾一个绑定，但是我又不知道里面组件改变日期的函数是啥...所以就无从下手，百度也找不到
为了避免跟我一样的菜鸟经历跟我同样的焦虑和无力感，所以想在这里分享一下antd日期选择框怎么实现按钮和时间的绑定
（不过应该会很少吧。。。想我这种菜鸟应该不多。。）
好，首先来讲讲思路，首先新建一个PickDate的class组件，这个组件是antd里头封装好的，拿来直接用就好：
import React, { Component } from 'react';import { DatePicker, Space } from 'antd';import moment from 'moment';// const { RangePicker } = DatePicker;const dateFormat = 'YYYY-MM-DD';class PickDate extends Component {constructor(props) {super(props);this.setDayData = this.setDayData.bind(this);}setDayData(data, dataString) {this.props.setDayData(dataString);}render() {return (<Space direction="vertical" size={12}><DatePicker format={dateFormat} defaultValue={moment()} onChange={this.setDayData} /></Space>);}}export default PickDate;
这里的setDayData是index传过来的数据，当时间改变时（onChange发生改变），就传入新的date值
那么，date值是应该怎么设置呢？
在index里用hook设置
这里的日期默认是当前时间，格式（format）是年月日，setDay是改变时间的函数
具体setDay是怎么改变时间的呢？
在PickDate组件里的：
通过props拿到父组件的数据，然后onChange改变
同理，时间选择器也是一样的道理：
import React, { Component } from 'react';import { TimePicker } from 'antd';import moment from 'moment';const { RangePicker } = TimePicker;const format = 'HH:mm';class PickTime extends Component {constructor(props) {super(props);this.setBeginTimeData = this.setBeginTimeData.bind(this);}setBeginTimeData(time, timeString) {this.props.setBeginTimeData(timeString[0]);this.props.setEndTimeData(timeString[1]);}render() {return (<RangePickerformat={format}style={{ width: 165 }}defaultValue={[ moment('08:00', format), moment() ]}onChange={this.setBeginTimeData}/>);}}export default PickTime;
