从多个 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 日期对象，如您在官方页面中所见：

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

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

类似于：

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

...

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

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

Update single state object from more than one React Date Picker input

reactjs

react-datepicker