React DatePicker问题：未设置默认值却自动赋值的技术问询

核心原因及解决办法 #

• 状态初始值未明确设为null：如果this.state.from_date初始为undefined，react-datepicker部分版本会自动将minDate/maxDate作为默认选中值（你的minDate设置为当天）。
  解决：组件初始化时将from_date明确设为null：

  constructor(props) {
    super(props);
    this.state = {
      from_date: null,
    };
  }
  

• 自定义输入组件的默认值逻辑：检查ExampleCustomInput组件，若其内部在接收空值时自动填充当前日期，也会导致此问题。
  解决：修改自定义输入组件，确保当传入的value为null/undefined时，显示空内容而非自动填充日期。

修改后的示例代码 #

constructor(props) {
  super(props);
  this.state = {
    from_date: null,
  };
}

render() {
  return (
    <DatePicker
      dateFormat="dd/MM/yyyy"
      minDate={subDays(new Date(), 0)}
      wrapperClassName="date-picker"
      selected={this.state.from_date}
      onChange={(date: any) => {
        this.setState({
          from_date: date,
        });
      }}
      customInput={<ExampleCustomInput />}
      dayClassName={() => "example-datepicker-day-class"}
      popperClassName="example-datepicker-class"
      todayButton="TODAY"
    />
  );
}

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