React中选择下拉框选项时清除DatePicker值的问题

你的问题出在两个核心点：

• 同一个startDateRef同时绑定给了Form.Group和Form.Control，导致ref.current实际指向外层容器而非日期输入框，直接修改value自然无效。
• 你的日期选择器是受控组件（value绑定了dateBetweenState.stDate），直接修改DOM元素的value不会同步到React状态，组件重新渲染时会被状态值覆盖，看不到变化。

正确的做法是直接更新管理日期的状态，而非操作DOM：

1. 确保状态由useState管理 #

先确认你的dateBetweenState是通过useState声明的：

import { useState } from 'react';

const [dateBetweenState, setDateBetweenState] = useState({
  stDate: ''
});

2. 修改下拉框的onChange逻辑 #

移除所有useRef相关代码，在下拉框的onChange中直接更新状态清空stDate：

const handleDropdownChange = (e) => {
  // 清除日期选择器的值
  setDateBetweenState(prev => ({
    ...prev,
    stDate: ''
  }));
  
  // 这里可以添加下拉框的其他业务逻辑，比如根据选择的天数处理日期范围
  const selectedDays = e.target.value;
  if (selectedDays !== '0') {
    // 示例：计算对应日期范围的逻辑
    // const targetDate = new Date();
    // targetDate.setDate(targetDate.getDate() - Number(selectedDays));
  }
};

3. 修正组件代码 #

移除日期输入框和Form.Group上的ref，同时修改下拉框的name避免和日期输入框冲突：

<Form.Group controlId="dob">
  <Form.Label>Start Date</Form.Label>

  <Form.Control
    type="date"
    name="stDate"
    value={dateBetweenState.stDate}
    placeholder="Date of Birth"
    onChange={handleChange}
  />

  <select
    className="form-select"
    name="dateRange"
    onChange={handleDropdownChange}
  >
    <option value="0">Choose...</option>
    <option value="7">7 Days</option>
    <option value="14">14 Days</option>
    <option value="30">30 Days</option>
  </select>
</Form.Group>

补充：通用表单处理函数 #

如果你的handleChange是通用的表单状态更新函数，逻辑应该如下：

const handleChange = (e) => {
  const { name, value } = e.target;
  setDateBetweenState(prev => ({
    ...prev,
    [name]: value
  }));
};

这样当下拉框选择选项时，状态中的stDate会被设为空字符串，受控的日期选择器会自动同步清空，完全不需要操作DOM。

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