React日期输入组件状态管理：如何区分fromDate与toDate？

针对你遇到的问题，不需要重复组件或引入全局状态，以下几种轻量方案可以解决：

方案一：传递状态标识，回调时带回信息 #

利用你已经传递给子组件的name属性，让子组件在触发回调时把标识和日期值一起传回父组件，父组件根据标识更新对应状态。

修改子组件 #

import React from "react";

const DateSearchBar = ({ name, value, handleDate }) => {
  return (
    <div>
      <div className="text-center">
        <input
          className="bg-slate-50 hover:bg-red-200 rounded-md h-12 w-80  text-center mb-16 "
          type="date"
          value={value || ""} {/* 处理初始未定义的情况 */}
          onChange={(e) => handleDate({ name, value: e.target.value })}
        />
      </div>
    </div>
  );
};

export default DateSearchBar;

修改父组件的回调函数 #

const handleDate = ({ name, value }) => {
  switch(name) {
    case "fromDate":
      setFromDate(value);
      break;
    case "toDate":
      setToDate(value);
      break;
    default:
      break;
  }
};

修正父组件的组件调用 #

注意你当前第二个DateSearchBar的value错误绑定为fromDate，需要改成toDate：

<DateSearchBar name="fromDate" value={fromDate} handleDate={handleDate} />
<DateSearchBar name="toDate" value={toDate} handleDate={handleDate} />

方案二：直接传递对应状态的setter函数（推荐） #

这种方式更简洁，子组件不需要关心父组件的状态标识，只负责将选中的日期传递给父组件传入的回调函数，父组件直接绑定对应的状态更新函数。

修改子组件 #

import React from "react";

const DateSearchBar = ({ value, onDateChange }) => {
  return (
    <div>
      <div className="text-center">
        <input
          className="bg-slate-50 hover:bg-red-200 rounded-md h-12 w-80  text-center mb-16 "
          type="date"
          value={value || ""}
          onChange={(e) => onDateChange(e.target.value)}
        />
      </div>
    </div>
  );
};

export default DateSearchBar;

修改父组件的组件调用 #

直接将setFromDate和setToDate作为回调传递给子组件：

<DateSearchBar value={fromDate} onDateChange={setFromDate} />
<DateSearchBar value={toDate} onDateChange={setToDate} />

这种方式让子组件职责更单一，只专注于日期选择的UI和交互，父组件管理状态逻辑，代码更清晰。

方案三：合并日期状态为单个对象 #

将fromDate和toDate合并成一个状态对象，通过字段名来区分更新的状态。

修改父组件状态 #

const [dates, setDates] = useState({ fromDate: undefined, toDate: undefined });

修改父组件回调函数 #

const handleDate = ({ field, value }) => {
  setDates(prevState => ({ ...prevState, [field]: value }));
};

修改子组件和调用 #

// 子组件
const DateSearchBar = ({ field, value, handleDate }) => {
  return (
    <div>
      <div className="text-center">
        <input
          className="bg-slate-50 hover:bg-red-200 rounded-md h-12 w-80  text-center mb-16 "
          type="date"
          value={value || ""}
          onChange={(e) => handleDate({ field, value: e.target.value })}
        />
      </div>
    </div>
  );
};

// 父组件调用
<DateSearchBar field="fromDate" value={dates.fromDate} handleDate={handleDate} />
<DateSearchBar field="toDate" value={dates.toDate} handleDate={handleDate} />

额外提示 #

你当前代码中第二个DateSearchBar的value属性错误绑定为fromDate，无论选择哪个日期，第二个输入框都会显示fromDate的值，记得修正为toDate。

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