如何解决 React DateTimePicker 返回 SyntheticBaseEvent 值 onChange

Question

我正在使用 React DateTimePicker version 3.2.4 ("react-datetime-picker": "3.4.2") 并且遇到了一个奇怪的问题。我在一个表单中使用它，并使用当前日期自动填充表单：

import React, { useState } from 'react';
import DateTimePicker from 'react-datetime-picker';
import config from '../../config/config';
import axios from 'axios';

function AddMeetingForm() {
  const [meeting_name, setName] = useState('');
  const [meeting_location, setMeetingLocation] = useState('');
  const [date_time, setDateTime] = useState(new Date());

 // A bunch of irrelevant code
  
  const calendarChangeHandler = (event) => {
    setDateTime(new Date(event));
  };

  return (
    <div className='container all-center'>
      <div
        className='card text-center'
        style={{ background: '#54c5f1', width: '385px', height: '700px' }}
      >
        <form onSubmit={mySubmitHandler}>
          <h3 style={{ textDecoration: 'underline' }}>
            Complete the Add Meeting Form and hit submit:
          </h3>
          <div className='grid-container'>
            <div className='grid-item' style={{ width: '350px' }}>
              // Irrelevant inputs

              <label>*Meeting Date/Time</label>
              <DateTimePicker
                required
                type='text'
                name='date_time'
                id='date_time'
                onChange={calendarChangeHandler}
                value={date_time}
                style={{ backgroundColor: 'white', width: '466px' }}
              />
              <label>Notes</label>
              <textarea
                id='notes'
                name='notes'
                onChange={myChangeHandler}
                style={{
                  width: '100%',
                  marginBottom: '10px',
                  resize: 'vertical',
                  maxHeight: '200px',
                }}
              />
            </div>
          </div>
          <button
            className='btn btn-primary'
            type='submit'
            id='addMeetingBtn'
            style={{ marginTop: '40px' }}
          >
            Submit
          </button>
        </form>
      </div>
    </div>
  );
}
export default AddMeeting Form

如果用户使用下拉菜单更改日、月、年或时间，一切正常。但是，如果用户想通过在输入框中键入“2”来手动将 1/21/2021 更改为 2/21/201，调试器会显示，而不是基于更改事件的新日期，称为SyntheticBaseEvent 被传递，当它试图将无效日期插入 DateTimePicker 输入时会破坏代码： [![在此处输入图片描述][1]][1]

然后抛出一个错误：Uncaught Error: Invalid date: Invalid Date。为什么会发生这种情况，我怎样才能发现或防止这种 SyntheticBaseEvent 发生？ [1]: https://i.stack.imgur.com/vxpot.png

Answer 1

这个问题似乎是因为事件只选取了格式化日期时间的一部分。为了解决这个问题，我做了以下更改，解决了这个问题。

 <DateTimePicker
       required
       type='text'
       name='date_time'
       id='date_time'
       onChange={(date) => setDateTime(date)}
       selected={date_time}
       value={date_time}
       style={{ backgroundColor: 'white', width: '466px' }}
       format='MM/dd/yyyy h:mm aa'
       showTimeInput
       timeIntervals={40}
       showTimeSelect
 />

如何解决 React DateTimePicker 返回 SyntheticBaseEvent 值 onChange

How to resolve React DateTimePicker returning SyntheticBaseEvent value onChange

events

datetimepicker

reactjs

react-hooks