我在 next.js 项目中使用 react-date-range 中的 DateRangePicker。
您可以在他们的演示页面上看到预期的行为:如果您从右侧的月份中选择任何日期,月份将保持不变。 这是视频。
但在我的项目中,在选择日期时,从右侧的月份会跳到左侧(如您在本视频中看到的)。
我通过从演示页面复制代码制作了一个简单的演示:
import { addDays } from "date-fns";
import { useState } from "react";
import { DateRangePicker } from "react-date-range";
import "react-date-range/dist/styles.css"; // main style file
import "react-date-range/dist/theme/default.css"; // theme css file
export default function IndexPage() {
const [state, setState] = useState([
{
startDate: new Date(),
endDate: addDays(new Date(), 7),
key: "selection"
}
]);
return (
<div>
<h1>Hello</h1>
<DateRangePicker
onChange={(item) => setState([item.selection])}
showSelectionPreview={true}
moveRangeOnFirstSelection={false}
months={2}
ranges={state}
direction="horizontal"
/>
</div>
);
}
在这里您可以看到我的演示页面中的代码。
欢迎任何阻止这种行为的想法或解决方案!谢谢!
react-date-range的最后一个版本(14.0)添加了一个功能来解决这个问题。只需将此道具添加到您的组件中即可。
preventSnapRefocus="disabled"
但这可能会在控制台上显示错误消息。对我来说最好的选择已经被列出了
preventSnapRefocus
(是的,输入“禁用”或什么都不输入,行为是相同的......对我来说很奇怪)
https://github.com/hypeserver/react-date-range/blob/master/CHANGELOG.md
这是一个奇怪的问题——我确信更熟悉 Next.js 的人可以更新这个问题,以充实确切地为什么会出现此错误,但现在我已经确定了一个修复程序和一个可能的解释。
我将你的代码插入到一个
create-react-app
实例中,它工作得很好,很有趣:
这里是沙盒。
我测试了您相同的代码并观察到相同的奇怪格式。我还注意到
next.js
生成的日期奇怪地不准确;例如,它不会从今天开始(它已经关闭了一个日期,在“明天”开始选择;准确地开始初始选择的 create-react-app
版本不是这种情况),因此渲染。我最好的猜测: next.js
可能不会重新渲染 <DateRangePicker />
和/或其 css 值(或一般的组件?)——至少在组件初始化时不会?——所以我注入了使用 useEffect
加载时初始数据选择,并添加状态的字符串化版本作为容器 div 的键以强制重新渲染,并且不再显示奇怪的选择 css:
import { addDays } from "date-fns";
import { useState, useEffect } from "react";
import { DateRangePicker } from "react-date-range";
import "react-date-range/dist/styles.css"; // main style file
import "react-date-range/dist/theme/default.css"; // theme css file
export default function App() {
const [state, setState] = useState([]);
useEffect(() => { {/* <---- useEffect to update state on init */}
if (state.length === 0) {
setState([
{
startDate: new Date(),
endDate: addDays(new Date(), 7),
key: "selection"
}
]);
}
}, [state, setState]);
return (
<div key={JSON.stringify(state)}> {/* <-- added key here, to force rerender */}
<h1>Hello</h1>
<DateRangePicker
onChange={(item) => setState([item.selection])}
showSelectionPreview={true}
moveRangeOnFirstSelection={false}
months={2}
ranges={state}
direction="horizontal"
/>
</div>
);
}
我有同样的问题和设置
preventSnapRefocus={true}
对我有用。