React JS Date Picker的多个实例 [英] React js multiple instances of date picker
问题描述
如果我使用多个datepicker实例,则在更新react-datepicker上的日期时遇到问题.
I am having problem updating the date on react-datepicker if I use multiple instances of datepicker.
日期选择器组件:
<DatePicker
selected={this.state.from}
onChange={this.changeDate.bind(this)}
/>
在更改处理程序上:
changeDate(date) {
this.setState({
from : date
});
}
如果我仅使用一个实例,这似乎很好用,但是当我添加多个实例时,我必须为每个新创建的日期选择器组件创建单独的onchange处理程序. 我正在寻找的是一种只编写一个onchange处理程序函数并处理同一函数中多个datepicker实例的更改事件的方法.
This seems to work fine if i am using only one instance, but when I add more than one instances, I have to create separate onchange handler for each of the newly created date picker component. What I am looking for is a way to write just a single onchange handler function and handle change events for multiple instances of datepicker in that same function.
推荐答案
您可以使用对象field
状态将每个日期值存储在属性中
You can have a object field
state to store each date value in property
this.state = {
fields: {}
}
handleDateChange = (dateName, dateValue) => {
this.setState({
fields: {
...this.fields,
[dateName]: dateValue
}
})
}
// IN RENDER
<ReactDatepicker
value={this.fields["dateStart"]}
onChange={(value) => handleDateChange("dateStart", value)}
/>
这篇关于React JS Date Picker的多个实例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!