从多个 React Date Picker 输入更新单个状态对象

Question

尝试从嵌入更大控制形式的两个React Date Pickers 更新状态对象data，但不能这样做。任何想法我错过了什么？提前谢谢你。

在此处实时预览： https://codesandbox.io/s/autumn-https-nyr28?file=/src/App.js

export default function App() {
  const [data, setData] = useState({
    async: true,
    from: "",
    to: ""
  });

  const handleChange = event => {
    let target = event.target;
    let value = target.type === "checkbox" ? target.checked : target.value;
    let name = target.name;
    setData(previousSearchData => ({
      ...previousSearchData,
      [name]: value
    }));
  };

  const handleSubmit = event => {
    event.preventDefault();
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit}>
      Checkbox:{" "}
      <input
        name="async"
        type="checkbox"
        checked={data.checkbox}
        onChange={handleChange}
      />
      <br />
      From:{" "}
      <ReactDatePicker
        name="from"
        selected={data.from}
        onChange={handleChange}
        timeInputLabel="Start time:"
        dateFormat="yyyy/MM/dd h:mm aa"
        showTimeInput
      />
      To:{" "}
      <ReactDatePicker
        name="to"
        selected={data.to}
        onChange={handleChange}
        timeInputLabel="End time:"
        dateFormat="yyyy/MM/dd h:mm aa"
        showTimeInput
      />
      <input type="submit" value="submit" />
    </form>
  );
}

Answer 1

这个插件在输入改变后不发送js事件对象，它发送一个js Date对象，你可以在官方页面看到：

<DatePicker selected={startDate} onChange={date => setStartDate(date)} />

您需要专门为此类输入创建一个处理函数。

类似：

<DatePicker selected={startDate} onChange={date => handleDatePickerChange('startDate', date)} />

...

const handleDatePickerChange = (name, date) => {
    setData(previousSearchData => ({
      ...previousSearchData,
      [name]: date
    }));
};