如何实现点击SVG图标触发react-datepicker日期选择器弹出

你可以通过以下两种常用方案实现需求： #

方案1：手动控制显隐状态（适合需要自定义触发逻辑的场景） #

通过react-datepicker提供的受控open属性，自己维护选择器的显隐状态：

import { useState } from 'react';
import DatePicker from 'react-datepicker';
import CalendarIcon from './你的图标路径';

// 组件内声明状态
const [dateInput, setDateInput] = useState(null);
const [isPickerOpen, setIsPickerOpen] = useState(false);

组件渲染代码：

<div className="date-picker-wrapper">
  <DatePicker
    selected={dateInput}
    onChange={(date) => {
      setDateInput(date);
      setIsPickerOpen(false); // 选中日期后自动关闭弹框
    }}
    minDate={moment().toDate()}
    showPopperArrow={false}
    open={isPickerOpen} // 绑定受控显隐状态
    onClickOutside={() => setIsPickerOpen(false)} // 点击外部区域关闭弹框
  />
  <span onClick={() => setIsPickerOpen(true)} style={{ cursor: 'pointer' }}>
    <CalendarIcon />
  </span>
</div>

方案2：通过ref调用组件内置方法（更简洁，无需额外维护状态） #

直接调用react-datepicker实例自带的setOpen方法控制显隐：

import { useRef, useState } from 'react';
import DatePicker from 'react-datepicker';
import CalendarIcon from './你的图标路径';

// 组件内声明ref
const datePickerRef = useRef(null);
const [dateInput, setDateInput] = useState(null);

组件渲染代码：

<div className="date-picker-wrapper">
  <DatePicker
    ref={datePickerRef}
    selected={dateInput}
    onChange={(date) => setDateInput(date)}
    minDate={moment().toDate()}
    showPopperArrow={false}
  />
  <span 
    onClick={() => datePickerRef.current?.setOpen(true)} 
    style={{ cursor: 'pointer' }}
  >
    <CalendarIcon />
  </span>
</div>

样式优化（可选） #

如果需要让图标和输入框视觉上整合，可添加以下CSS：

.date-picker-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.date-picker-wrapper span {
  position: absolute;
  right: 8px;
  pointer-events: auto;
}
/* 给输入框加右侧内边距，避免文字被图标覆盖 */
.react-datepicker__input-container input {
  padding-right: 32px;
}

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