React js 日期选择器的多个实例 [英] 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 日期选择器的多个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！