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

【问题标题】：i am getting error after i selecting the date from @material-ui/pickers in React.js从 React.js 中的 @material-ui/pickers 选择日期后出现错误
【发布时间】：2022-08-10 02:57:26
【问题描述】：

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

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

**这是我的控制台：-

check this image

这是我的表格：-

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>
    </>
  );
};

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

标签： javascript mysql node.js reactjs material-uipickers

【解决方案1】：

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

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

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

【讨论】：