next.js 当在单次交互后从函数设置值时,React日历Ui未切换

bq8i3lrv  于 2023-04-11  发布在  React
关注(0)|答案(1)|浏览(157)

在触摸日历(脏)后,当按功能设置值时,React日历的UI未切换到相应的月份。

export default function App() {
  const [date, setDate] = useState([
    new Date('2022-05-10'),
    new Date('2022-05-15'),
  ]);
  return (
    <>
      <p>
        <div>
          <button onClick={() => setDate([new Date('2022-11-02'), new Date('2022-11-08')])}>click</button>
          <Calendar
            value={date}
            onChange={(v) => {
              setDate(v);
            }}
            selectRange
            minDate={new Date()}
            defaultStartDate={date[0]}
          />
        </div>
      </p>
)
}

如果按钮被点击,则发布日期的手动选择已经完成。(日历组件被点击并完成选择)。然后日期值改变,但UI保持不变。

l2osamch

l2osamch1#

你必须手动设置activeStartDate prop ,才能有一个完全控制的日历。
这是对我有用的代码(我从props接收受控日期):

export default function Calendar({ date, handleDateChange }) {
  return <MiniCalendar
           value={date.toDate()}
           activeStartDate={date.startOf('month').toDate()}
           onChange={handleDateChange}
           showNavigation={false} />
}

我使用dayjs日期来处理我的状态并检索该月的第一天。
有用链接:https://github.com/wojtekmaj/react-calendar/issues/358

相关问题