Question

我有一个使用react-day-picker组件的组件。我不想有一个日期选择器，年份和月份可以单独增加或减少。所以我已经覆盖了navbarElement（正如你在上一行中看到的那样）。在箭头函数handleNextYearClick中，年份应增加1.但是如何从父组件date访问和设置DayPicker。我只能拨打onNextClick，只会增加月份+ 1。

export interface IDatePickerNavbarProps {
    date?: Date,
    nextMonth?: Date,
    previousMonth?: Date,
    localeUtils?: any,
    locale?: string,
    onNextClick?: () => {}
}

export interface IDatePickerNavbarState {

}

class DatePickerNavBar extends Component<IDatePickerNavbarProps, IDatePickerNavbarState> {

    constructor(props: IDatePickerNavbarProps) {
        super(props);
    }

    handleNextMonthClick = (event: React.MouseEvent<HTMLElement>) => {
        this.props.onNextClick();
    }

    handleNextYearClick = (event: React.MouseEvent<HTMLElement>) => {
        // How to set the new date => current date + 1 year
        // I am only able to call this.props.onNextClick() but that does 
        // +1 only month count
    }

    render() {
        return (
            <div className={Styles.DayPickerSelectBox}>
                <div className={Styles.DayPickerNavbarYear}>
                    year:
                    <span>last</span>  -  <span onClick={this.handleNextYearClick}>next</span>
                </div>
                <div className={Styles.DayPickerNavbarMonth}>
                    month:
                    <span>last</span>  -  <span onClick={this.handleNextMonthClick}>next</span>
                </div>
            </div>
        );
    }
}

...这是我的主日期选择器组件render()方法中的代码...

<DayPicker navbarElement={<DatePickerNavBar />} captionElement={<DatePickerCaption />} />

不要因打字稿符号而感到不安。

Answer 1

可悲的是，本月没有公开navbarElement：

http://react-day-picker.js.org/api/DayPicker#navbarElement

它有previousMonth强硬：）

month道具将在下一版本中添加：https://github.com/gpbl/react-day-picker/pull/552

navbarElement={
  (month) => <DatePickerNavBar currentMonth={month} />
}

react-day-picker：在navbarElement中设置日期

1 个答案: