- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我正在使用 Airbnb 的 react-dates日历库:
export const Calendar = ({setDates, startDate, endDate, setFocused, focusedInput}) => {
return (
<div className="input-group">
<div className="input-group_addon">
<i className="icon-date-inactive" aria-hidden="true"></i>
</div>
<DateRangePicker
startDate={startDate}
endDate={endDate}
focusedInput={focusedInput}
displayFormat="ddd, D MMM"
onDatesChange={setDates}
onFocusChange={setFocused}
/>
</div>
)
}
const mapStateToProps = (state) => {
return {
startDate: state.model.model.calendar.startDate,
endDate: state.model.model.calendar.endDate,
focusedInput: state.model.model.calendar.focusedInput
}
}
const mapDispatchToProps = (dispatch) => {
return {
setDates: (dates) => {
dispatch(marketplaceSetDates(dates.startDate, dates.endDate));
},
setFocused: (focusedInput) => {
dispatch(marketplaceSetFocused(focusedInput));
}
}
}
export const CalendarContainer = connect(mapStateToProps, mapDispatchToProps)(Calendar);
export function marketplaceSetDates(startDate, endDate) {
return {
type: 'MARKETPLACE_MODEL_DATES_CHANGE',
dates: {
start: startDate,
end: endDate
}
}
}
export function marketplaceSetFocused(focusedInput) {
return {
type: 'MARKETPLACE_MODEL_FOCUS_CHANGE',
focusedInput: focusedInput
}
}
let initialState = {
model: {
calendar: {
startDate: moment().add(1, 'day'),
endDate: moment().add(4, 'day'),
focusedInput: null
}
},
}
export const modelReducer = (state = initialState, action) => {
let newState = {};
switch(action.type) {
case 'MARKETPLACE_MODEL_FOCUS_CHANGE':
newState = Object.assign({}, state);
newState.model.calendar.focusedInput = action.focusedInput;
return newState;
case 'MARKETPLACE_MODEL_DATES_CHANGE':
newState = Object.assign({}, state);
newState.model.calendar.startDate = (action.dates.start === null) ?
state.model.calendar.startDate : action.dates.start;
newState.model.calendar.endDate = (action.dates.end === null) ?
state.model.calendar.startDate.add(4, 'day') : action.dates.end;
return newState;
}
return state;
}
我们日历的一条规则是,每当用户选择新的 startDate
或 endDate
时,它必须自动调整为至少相隔 3 天。
例如,如您所见,初始状态将日期设置为明天和 4 天后。
开始日期
,(请注意,它不在之前几天的范围内),因此 endDate
必须自动调整为 10 月 27 日。 endDate
时,startDate
必须自动相应调整,即所选 endDate
之前 3 天。 但是使用我当前的代码,当我单击 startDate
时,startDate
和 endDate
都设置为 3 天后,它只能是 endDate
的值。
我怀疑这背后的原因是由于 redux
中的状态变化是异步的,因此 state.model.calendar.startDate.add(4, 'day')
在 newState.model.calendar.startDate = ...
之前先行,我的假设正确吗?
否则,我需要解决方法的帮助。
最佳答案
长话短说:将添加天数函数更改为:state.model.calendar.startDate.clone().add(4, 'day')
我认为问题出在 momentjs add 函数上。来自文档: http://momentjs.com/docs/#/manipulating/add/
Add
... Mutates the original moment by adding time.
这意味着当你这样做时state.model.calendar.startDate.add(4, 'day')
它实际上改变了 state.model.calendar.startDate
的值。
因此,理想情况下,您应该复制该时刻,然后使用 clone() 进行更改。
关于javascript - 更改时自动调整依赖状态,反之亦然,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40103712/
我有一个问题,我有一个数据结构和多个线程试图对其进行操作。说得越简单越好:我有线程A、B和C,线程A只能做它的操作,只要B和C不对数据集做任何改变。 B 和 C 大部分时间都可以同时在设备上操作。所以
我有不寻常格式的数据。变量名/列标题应该是当前行值,行值应该是变量名/列标题。 也就是说,我有这样一个数据框: id % gather(key, val, -id) %>% filter(
我需要在字符串 foo bar foo bar bar foo 中将所有 foo 替换为 bar 并将所有 bar 替换为 foo 。所以结果应该看起来像 bar foo bar foo foo ba
我对 Azure 还不太熟悉。 问题是我正在开发 Azure Functions,有时我必须在本地工作(代码/测试等),有时则在 Azure 上工作。每次切换时,我都必须手动比较和更改应用程序设置。
如何在 php 中从一年中的第 n 天到这样的日期: getdatefromday(275, 2012) 它输出一个日期(如果是一个对象更好)。 我也想做相反的事情,比如getdayoftheyear
我有一个字符串 var str = "か22222"; 我想这样搜索 str.indexOf("か2");其中“か2”都是多字节字符,而“str”只有“か”是多字节 但我仍然应该得到indexOf的结
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗?通过 editing this post 添加详细信息并澄清问题. 已关闭 8 年前。 Improve th
我正在编写一个C程序,从标准输入中逐一读取字符,将所有大写字符转换为小写,将所有小写字符转换为大写,并将结果写入标准输出。我还想计算我读了多少个字符,以及其中每个方向上转换了多少个字符,并在最后输出总
如何在“动态 C”中将整数转换为字符,反之亦然。 使用VB.NET如下: Dim i As Integer Dim c As Char ' Integer to Character i = 302 c
我有一个包含以下文本的文本文件,没有换行符... Hello World 我想将小写字符转换为大写字符,反之亦然,这样同一个文本文件将以以下文本结束...... hELLOW wORLD 不幸的是,当
我有这个 C 代码,它试图在 signed char 中存储一个 signed short。signed char 范围是 [-128,127],signed short 范围是 [-32768, 3
这个问题类似于Sorted list to complete BST array representation但也许更专注。这个问题可以用来解决Inserting node dynamically i
我有 java 三个字符串。举个例子。 String test = "Hi, "; String test1 = "this is "; String test2 = "Java programmin
问题的最后一部分是什么让我失望。我需要使用 List Comprehension 在一行中执行此操作,到目前为止我已经尝试过: def Function(string): new_string
如何将十进制转换为二进制,反之亦然 我在solaris10平台上工作 谁能帮我一个命令 Decimal to Binary 4000000002-100000000000000000000000000
这个问题在这里已经有了答案: Assigning pointers to atomic type to pointers to non atomic type (2 个答案) 关闭去年。 给定以下代
我有一个 class A 作为 class B 的基类。 我在我的虚拟函数xyz()非虚拟函数abc(),如下所述。 由于运行时多态性,B:xyz 被调用——我理解这一点。 但是我不明白,为什么后面是
我想知道蓝牙 4.0(低功耗)手机是否可以发现经典的蓝牙设备(3.0 及更低版本),反之亦然。我感兴趣的只是发现“友好名称”。 编辑:据我了解这篇文章的回复,蓝牙 4.0 可以发现经典的蓝牙设备,但不
我的数据框如下: df = pd.DataFrame({'a': {'d': 1, 'e': 0, 'f': 1, 'g': 1}, 'b': {'d': 0,
我正在尝试使用 VBA,以便我可以在 sheet2 的单元格 B7 中输入一个值,然后它会自动填充到 sheet3 的 C7 中,反之亦然。我尝试了下面的代码,但无法正常工作,有什么建议吗?对于一串数
我是一名优秀的程序员,十分优秀!