React函数式组件如何使用回调事件传递周日期区间到父组件

我正在尝试将下一周或上一周的日期区间从子组件传递到父组件，当前使用的是带hooks的函数式组件，希望获得可用于从React日历组件传递正确日期区间的帮助或建议。

提前致谢。

示例代码 #

我希望从Calander component选中日期后将其传入TestRequest组件。例如toobar.label返回的September 19 – 25需要对应转换为startDate为2021-09-19、endDate为2021-09-25的格式。

//child component
export interface CalendarProps {
    events: any[],
    handleSelect: any,
    onClick: any,
    handleChange: any
}

const DatesComponent  = (toolbar: any) => {
    const back = () => { toolbar.onNavigate('prev'); };
    const next = () => { toolbar.onNavigate('next'); };
    return (
        <div className='calander-container'>
        <div className='calander-container-details'>
            <ChevronLeft  size='medium' onClick={back} className='arrow'/>
            <ChevronRight size='medium' onClick={next} className='arrow'/>
        </div>
        </div >
    )
};

const DatesComponent: React.FC<CalendarProps> = (props) => {
    return <>
        <Calendar
        selectable={true}
        popup={true}
        views={['week']}
        events={props.events}
        defaultView={Views.WEEK}
        scrollToTime={new Date(1970, 1, 1, 6)}
        defaultDate={new Date()}
        onSelectEvent={(event :any) => props.handleSelect(event)}
        onNavigate={(e :any) => props.onClick(e)}
        min={new Date(0, 0, 0, 8, 0, 0)}
        max={new Date(0, 0, 0, 20, 0, 0)}
        components={{
            toolbar: DatesComponent
        }}
        />
    </>
}
    
export default DatesComponent;

//parent
cons TestRequest= () => {
    const [, setDate] = useState(null)
    const [details, setDetails] = useState(null)
    return <>
        <div className='calender-d'>
            <DisplayCalander setDate={setDate}
                setDetails={setDetails} getDetails={{details}}/>
        </div>
    </>
}
// @ts-ignore
export default withRouter(PendingRequest);


const DisplayCalander: React.SFC<DisplayAllCalendarProps> = ({ setDate, setDetails }) => {
    return (<>
    <DatesComponent 
        onClick={(e:any)=>{ setDate(e)}}
        handleSelect={(e:any) => setDetails(e)}/>
    </>)
};

解决方案更新 #

最终我找到了获取周区间的方法，使用onRangeChange事件即可实现。

更新后代码 #

const DatesComponent: React.FC<CalendarProps> = (props) => {
    return <>
        <Calendar
        selectable={true}
        popup={true}
        views={['week']}
        events={props.events}
        defaultView={Views.WEEK}
        scrollToTime={new Date(1970, 1, 1, 6)}
        defaultDate={new Date()}
        onSelectEvent={(event :any) => props.handleSelect(event)}
        onRangeChange={(e :any) => props.handleChange(e)}
        onNavigate={(e:any) => props.onClick(e)}
        min={new Date(0, 0, 0, 8, 0, 0)}
        max={new Date(0, 0, 0, 20, 0, 0)}
        components={{
            toolbar: DatesComponent
        }}
        />
    </>
}

谢谢:)

内容的提问来源于stack exchange，提问作者Tammy