javascript - React js日期选择器的多个实例

Question

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

日期选择器组件:

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

关于更改处理程序:

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

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

Answer 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"
/>