React js多个日期选择器实例答案

【问题标题】：React js multiple instances of date pickerReact js多个日期选择器实例
【发布时间】：2018-06-15 00:00:24
【问题描述】：

如果我使用多个日期选择器实例，我在更新 react-datepicker 上的日期时遇到问题。

日期选择器组件：

<DatePicker
  selected={this.state.from}
  onChange={this.changeDate.bind(this)}
/>

关于更改处理程序：

changeDate(date) {
    this.setState({
        from : date
    });
}

如果我只使用一个实例，这似乎可以正常工作，但是当我添加多个实例时，我必须为每个新创建的日期选择器组件创建单独的 onchange 处理程序。我正在寻找的是一种只编写一个 onchange 处理函数并在同一函数中为多个 datepicker 实例处理更改事件的方法。

【问题讨论】：

听起来您有一个包含多个 DatePicker 的视图，并且每个视图都更新了自己单独的 state 属性，对吧？如果是这样，您可以重写 changeDate 以接受指示状态属性名称的参数，并返回仅在该属性上调用 setState 的函数。
是的，这是正确的，我尝试这样做，但我无法更新 handlechange 函数中的状态，如果我用"startDate": dateValue 之类的字符串文字更新状态，那么它可以工作，但如果我使用像dateName: dateValue 这样的函数参数然后它不起作用，即使dateName=startDate
你在使用 react-datepicker 吗？我和你有同样的问题。你是怎么解决的？

标签： javascript reactjs datepicker react-datepicker

【解决方案1】：

你可以有onChange这样的处理程序，带有两个参数dateName和dateValue

//in state
 this.state = {
  startDate: moment(),
  endDate: moment(),
}

//My onChange handler function    
handleDateChange(dateName, dateValue) {
    let { startDate, endDate } = this.state;
    if (dateName === 'startDateTime') {
      startDate = dateValue;
    } else {
      endDate = dateValue;
    }
    this.setState({
      startDate,
      endDate,
    });
  }

// Date Picker component
<DatePicker
    id="start-date-time"
    name="startDateTime"
    className="form-control"
    selected={this.state.startDate}
    value={this.state.startDate}
    onChange={date => this.handleDateChange('startDateTime', date)}
    showTimeSelect
    timeFormat="HH:mm"
    timeIntervals={15}
    dateFormat="YYYY-MM-DD, h:mm a"
    timeCaption="time"
  />
//other use of Date picker
<DatePicker


 id="end-date-time"
  name="endDateTime"
  className="form-control"
  selected={this.state.endDate}
  value={this.state.endDate}
  onChange={date => this.handleDateChange('endDateTime', date)}
  placeholderText="choose end date of event"
  isClearable={true}
  showTimeSelect
  timeFormat="HH:mm"
  timeIntervals={15}
  dateFormat="YYYY-MM-DD, h:mm a"
  timeCaption="time"
/>

【讨论】：

【解决方案2】：

您可以有一个对象field state 来将每个日期值存储在属性中

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)}
/>

【讨论】：

除了这部分 fields: { ...this.fields, [dateName]: dateValue } 之外，一切似乎都正常工作我试过这个fields: { [dateName]: dateValue } 和这个fields: { dateName: dateValue } 他们都没有工作，但这个工作：fields: { 'startDate': dateValue }
你能把你的代码放到codesanbox或其他地方吗？只说一行代码没有多大帮助
您可以阅读更多here
我得到了它的工作，我在代码中有一些新手错误，谢谢@dungtranhcmus