如何让React DatePicker选中已选值时自动触发onChange函数

你遇到的是react-datepicker的内置默认逻辑：仅当选中值和当前绑定的selected属性值存在差异时，才会触发onChange事件，以下是3种可直接落地的绕过方案：

方案1：使用onSelect事件替代（最简便） #

react-datepicker暴露的onSelect事件不受值是否变化的限制，只要点击日历面板的日期选项就会触发，参数和onChange完全一致，都是选中的日期对象。
修改代码如下：

<DatePicker
  // 其他原有属性保持不变
  // 保留onChange处理手动输入场景，新增onSelect处理点击日历场景
  onChange={this.handleInput}
  onSelect={this.handleInput}
/>

如果不需要支持手动输入日期，可直接删除onChange，仅保留onSelect即可，同时给自定义input加上readOnly属性避免用户手动输入。

方案2：重置selected状态触发值变化判断 #

每次选择日期后，临时把selected绑定的值重置为非当前日期值，下次打开日历的时候再还原，让组件始终判定新选中的值为变更值：

1. 新增state存储临时选中值

state = {
  // 原有state不变
  tempSelected: null
}

2. 修改DatePicker的selected绑定

<DatePicker
  // 其他原有属性保持不变
  selected={this.state.tempSelected || this.openToDate(this.props.value)}
  onChange={(val) => {
    this.handleInput(val)
    // 处理完成后重置临时选中值
    this.setState({tempSelected: null})
  }}
  onOpen={() => {
    // 打开日历时赋值当前选中值给临时变量
    this.setState({tempSelected: this.openToDate(this.props.value)})
  }}
/>

方案3：自定义日期单元格点击事件（最可控） #

通过renderDay属性重写日期单元格的渲染逻辑，手动绑定点击事件触发处理函数，完全绕过组件内置的触发判断：

<DatePicker
  // 其他原有属性保持不变
  renderDay={(day) => (
    <div 
      className="react-datepicker-day"
      onClick={() => this.handleInput(day)}
    >
      {moment(day).date()}
    </div>
  )}
/>

可自行给自定义的单元格添加选中、禁用等状态的样式，和原有组件样式保持一致即可。

内容的提问来源于stack exchange，提问作者Nhan Nguyen