React中tailwind-datepicker-react组件输入框无法重置问题

问题根源是你没有给Datepicker组件绑定value属性——这个组件是受控组件，必须通过value同步外部状态值。你当前只通过onChange更新了state，但组件内部的输入框没有和state绑定，所以重置state为null时，组件不会响应更新。

修复步骤 #

• 给每个Datepicker添加value属性，分别绑定startDate和endDate
• 可选：调整endDate的disabled逻辑，避免清空startDate后endDate一直处于禁用状态

修改后的完整代码 #

import { useState } from "react";
import Datepicker from "tailwind-datepicker-react";

const dateOptions = (placeholder) => ({
  autoHide: true,
  clearBtn: true,
  clearBtnText: "Clear",
  maxDate: new Date("2030-01-01"),
  minDate: new Date("1950-01-01"),
  theme: {
    background: "bg-white",
    text: "text-black",
    input: "bg-white",
  },
  inputPlaceholderProp: placeholder,
});

const Notifications = () => {
  const [showStartDate, setShowStartDate] = useState(false);
  const [showEndDate, setShowEndDate] = useState(false);
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleStartDateChange = (date) => setStartDate(date);
  const handleEndDateChange = (date) => setEndDate(date);

  const handleSearch = () => {
    const params = {
      start_date: startDate?.toISOString()?.split('T')?.[0] || null,
      end_date: endDate?.toISOString()?.split('T')?.[0] || null,
    };
    console.log(params);
  };

  const clearSearch = () => {
    setStartDate(null);
    setEndDate(null);
    setShowStartDate(false);
    setShowEndDate(false);
    console.log("Search cleared"); 
  };

  return (
    <div>
      <div className="flex mb-4">
        <Datepicker
          options={dateOptions("Start Date")}
          onChange={handleStartDateChange}
          show={showStartDate}
          setShow={setShowStartDate}
          value={startDate} {/* 添加value绑定 */}
        />
        <Datepicker
          options={dateOptions("End Date")}
          onChange={handleEndDateChange}
          show={showEndDate}
          setShow={setShowEndDate}
          disabled={!startDate && endDate !== null} {/* 调整禁用逻辑 */}
          value={endDate} {/* 添加value绑定 */}
        />
        <button onClick={handleSearch} >
          Search
        </button>
        <button onClick={clearSearch} >
          Clear
        </button>
      </div>
    </div>
  );
};

export default Notifications;

关键说明 #

• value属性是受控组件的核心，它让组件显示值与你的state保持同步，调用setStartDate(null)时，组件会立即清空输入框内容。
• 调整endDate的disabled条件是为了清空所有日期后，用户能重新选择起始日期；如果你希望只有存在起始日期时才能选择结束日期，也可以保留原逻辑，但需注意清空起始日期后结束日期会被禁用的交互体验。

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