react+ts封装AntdUI的日期选择框之月份选择器DatePicker.month

需求:由于在项目开发中,当需要使用该组件时都需要对该组件进行大量的代码输出,为了方便代码统一管理,减少冗余代码,所以将此组件进行二次封装

其他成员在使用中只需将自己的设置通过对应的参数传递到该组件,在执行选中操作后直接将返回值回传给调用的父组件即可。

技术涉及:react+ts+antd

代码如下:

parent.tsx

import React from 'react'; import MonthPicker from '../components/DatePicker/children'; import moment from 'moment'; class FormsView extends React.Component { constructor(props: {}) { super(props) this.state = { } } getSelectMonth(data: any) { console.log('获取选中的月份', data); } disabledDate1(current:any) {
    // 设置不可选的日期
return current && current > moment().endOf('day'); } render() { return <div className="parent"> <MonthPicker data={new Date()} getSelectMonth={this.getSelectMonth.bind(this)} setDisableDate={this.disabledDate1.bind(this)}></MonthPicker> </div> } } export default FormsView

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wspdjg.html