Как использовать средство выбора даты в компоненте реакции с использованием хуков

Question

У меня есть компонент с формой, которая должна отображать средство выбора даты

const MyComponent = () => {
  const [formData, setFormData] = useState({
    dateFrom: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
    dateTo: new Date()
  });

  const handleOnChange = e => {
    setFormData({...formData, [e.target.name]: e.target.value});
  };

  return (
    <DatePicker
      selected={formData.dateFrom}
      name="dateFrom"
      dateFormat="MMMM d, yyyy"
      onChange={e => handleOnChange(e)}
      />
  );
};

Что мне нужно сделать, это сохранить новую дату в состоянии и вернуть ее для обновления компонента, используя его выбранное свойство.

метод handleOnChange работает для других элементов управления формы, а не для средства выбора даты, появляется сообщение об ошибке:

Невозможно прочитать свойство 'имя' из неопределенного

Есть предложения?

Answer 1

обратный вызов onChange для <DatePicker /> будет иметь значение в качестве первого параметра, а не event, вы можете передать аналогичный объект в handleOnChange, чтобы сохранить его обобщенным c:

<DatePicker
  selected={formData.dateFrom}
  name="dateFrom"
  dateFormat="MMMM d, yyyy"
  onChange={value => handleOnChange({target : { name: "dateForm", value}})}
/>