React-DatePicker自定义Input后无法选日期问题及方案咨询

这个问题我之前也踩过坑，核心原因是你的自定义Input组件没有正确传递react-datepicker需要的触发事件，导致点击输入框时无法唤起日期选择器。

你的思路方向是对的，但还需要补全关键一步 #

你给Input.Props添加onClick属性的做法是正确的第一步，但关键是要把这个onClick事件传递给组件内部的原生input元素——因为react-datepicker会通过customInput传递点击、聚焦等事件来触发选择器弹出，而你的组件之前没有把这些事件绑定到实际的输入框上，自然无法触发弹出逻辑。

修正后的Input组件代码 #

你需要在内部的input标签上添加onClick属性，同时为了更健壮，建议也加上onFocus（支持聚焦唤起选择器），或者直接用剩余属性接收所有额外的事件和属性，这样后续react-datepicker有其他需求也能兼容：

export namespace Input {
  export interface Props {
    onChange: (event: any) => void;
    placeholder?: string;
    value?: string | number;
    isSecure?: any;
    id?: string;
    onClick?: (event: any) => void; // 你已添加的属性
    onFocus?: (event: any) => void; // 可选，支持聚焦唤起选择器
    // 更灵活的方式：直接接收原生input的所有属性
    // ...rest: React.InputHTMLAttributes<HTMLInputElement>
  }
}

export class Input extends React.Component<Input.Props, Input.State> {
  public render() {
    const controlClass = classNames([style.control]);
    const inputClass = classNames([style.input]);
    // 解构出自定义属性，剩余属性统一传递给原生input
    const { onChange, isSecure, placeholder, value, id, onClick, onFocus, ...rest } = this.props;
    
    return (
      <p className={controlClass}>
        <input
          id={id}
          onChange={onChange}
          className={inputClass}
          type={isSecure ? "password" : "text"}
          placeholder={placeholder}
          value={value}
          onClick={onClick} // 传递点击事件给原生input
          onFocus={onFocus} // 传递聚焦事件（可选）
          {...rest} // 传递其他可能的属性/事件，比如react-datepicker的ref、aria属性等
        />
      </p>
    );
  }
}

验证使用方式 #

之后你的DatePicker使用方式不需要改变，react-datepicker会自动把触发选择器的事件传递给你的自定义Input组件：

<DatePicker 
  customInput={<Input />} 
  dateFormat="DD.MM.YYYY" 
  selected={selectedDate} 
  onChange={handleDateChange} 
/>

额外提示 #

如果后续还有样式或者交互的问题，可以检查react-datepicker给customInput传递的其他props（比如ref、aria-*属性），确保你的组件能正确接收并传递给原生input，这样能避免更多兼容性问题。

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