从 React.js 中的 @material-ui/pickers 选择日期后出现错误

Question

我在这个创建日期选择器字段中有一个表单，我默认设置为使用 new Date() 它工作正常。 但是当我 select 任何日期时，我都会收到此错误。

当我使用 {TextField} 组件时，它工作正常，但我无法将默认值设置为当前日期，这就是我使用 {KeyboardDatePicker} 的原因。

**这是我的控制台：-

检查这张图片

这是我的表格：-

import { Route, Routes, useNavigate } from "react-router-dom";
import axios from "axios";
import { KeyboardDatePicker} from '@material-ui/pickers';

export default function DonorForm ({showForm})  {

   const current = new Date();
  const dateNew = `${current.getMonth()+1}/${current.getDate()}/${current.getFullYear()}`
  // console.log(dateNew,"<<<---checking new Date")

  const [donors, setDonors] = useState({
    donateDate:dateNew
  });

  let name, value;
  const handleInputs = (e) => {
    name = e.target.name;
    value = e.target.value;
    setDonors({...donors, [name]: value });
  };
  const onclick = async (e) => {
    const {donateDate } =
    donors;

    try {
        const config = {
          header: {
            "Content type": "appication/json",
          },
        };
        const { data } = await axios.post(
          "http://localhost:4000/donorsform",
          {donateDate},
          config
        );
        console.log(data);
        localStorage.setItem("donorsInfo", JSON.stringify(data));
        navigate("/coordinators/myprojects");
        
    } catch (error) {
      setError(true);
    }
  };

  return(
    <>
                  <div className="card-header ">
                    <h3 className="card-title my-1">Donor Details</h3>
                  </div>
                  <form 
                    onSubmit={handleSubmit(onclick)}
                    method="POST"
                    className="form-horizontal "
                    id="register-form"
                  >
                    <div className="card-body">
                     
                      <div className="row">
                      <div className="form-group">
                          <label className="form-label col">Date</label>
                          <div>
                            <KeyboardDatePicker
                             autoOk
                             variant="inline"
                             inputVariant="outlined"
                           name="donateDate"
                             format="DD/MM/YYYY"
                             value={donors.donateDate}
                             InputAdornmentProps={{ position: "start" }}
                             onChange={handleInputs}
                            />
                            
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="card-footer">
                      <button type="submit" className="btn-hover-1 color-3">
                        Submit
                      </button>
                    </div>
                  </form>
    </>
  );
};
 

我该如何解决这个问题请帮助我。 谢谢！！！

Answer 1

根据文档，KeyboardDatePicker 的 onChange 不接收和事件，它接收一个日期，所以也许你应该分开实现来管理这个特定的输入：

<KeyboardDatePicker ...
                    onChange={handleDateChange} />

const handleDateChange = (date) => {
    setDonors({...donors, donateDate: date }); ...