javascript - Datepicker 事件处理程序上的日期未更改

Question

我正在使用我遵循程序的材料 UI 日期选择器，但在事件处理程序上，日期没有改变，但我给出的初始值工作正常useState。当我想选择我想要的日期时，我希望我的日期选择器工作顺利。Datepicker 的示例也在链接中

https://material-ui.com/components/pickers/#date-time-pickers https://codesandbox.io/s/z9k3z

import {
  KeyboardDatePicker,
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import React, { useState } from "react";

function AddCar() {
  const [date, setDate] = useState(new Date());

  const addCar = (e) => {
    e.preventDefault();
    console.log(date.toLocaleDateString());
    setDate(new Date());
  };
  return (
    <div className="addCar">
      <div>
        <form className="addCar__form" onSubmit={addCar}>
          {/* Date */}
          <div className="addCar__mainForm row ">
            <div className="col-lg-3 col-md-6 col-sm-12 my-2">
              <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <KeyboardDatePicker
                  disableToolbar
                  variant="inline"
                  format="MM-dd-yyyy"
                  margin="normal"
                  label="Select Date"
                  value={date}
                  onChange={(e) => setDate(date)}
                  KeyboardButtonProps={{
                    "aria-label": "change date",
                  }}
                />
              </MuiPickersUtilsProvider>
            </div>
          </div>

          <button type="submit" className="btn btn-success">
            ADD CAR
          </button>
        </form>
      </div>
    </div>
  );
}

export default AddCar;

标签： javascriptreactjsreact-hooksmaterial-ui

Answer 1

将此行更改
onChange={(e) => setDate(date)}
为
onChange={setDate}
Codesandbox：https ://codesandbox.io/s/material-demo-forked-siueb?file=/addCar.js:939-957