使用材料 ui 选择日期时不会触发 handleChange

Question

因此，我尝试使用 Material ui datepicker 设置日期，但是当单击给定日期时，不会选择所选窗口，并且日期窗口不会关闭。我认为是因为我将日期传递到另一个文件中并且handleChange（来自Formik）与日期选择器不对应

useFormAddmyInfo.js

import {useState, useEffect} from 'react';
import {useNavigate} from 'react-router-dom';
import * as Yup from 'yup';

const useFormAddMyInfo = () => {
    const BASE_URL = process.env.REACT_APP_URL

    const navigate = useNavigate();
    const [date, setDate] = useState(new Date());



    const initialValues = {
        name: "",
        age: "",
        height: "",
        weight: "",
        date: new Date(),
    };

  const validationSchema = Yup.object().shape({
        name: Yup.string().required("Name is required!").min(3, "Name should be atleast 3 characters!").max(20,"Maximum characters for name are 20!"),
        age: Yup.number("Age is a number value!").required("Age is required!").min(10, "You are too young for, age minimum is 10!").max(100, "Invalid age!"),
        height: Yup.number("Height is a number value!").required("Height is required!").min(130, "Height minimum is 130!").max(250,"Maximum height is 250!"),
        weight: Yup.number("Weight is a number value!").required("Weight is required!").min(40, "Weight minimum is 40!").max(250,"Maximum weight is 200!"),
        date: Yup.date().required("Date is required!"),
    });

    const onSubmit = (data) => {
        fetch(`${BASE_URL}/my-info`,{
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(data)
        }).then(() => {
            navigate('/teams')
        })
    }

    return {initialValues, validationSchema, error, onSubmit, setDate}
}

export default useFormAddMyInfo

AddFormMyInfo.js

import { Link } from 'react-router-dom';
import { Formik } from "formik";
import useFormAddMyInfo from './useFormAddMyInfo';
import * as React from 'react';
import { TextField, Grid, Button } from '@mui/material';
import { KeyboardDatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";

const AddMyInfo = (submitForm) => {
    const { initialValues, validationSchema, error, onSubmit } = useFormAddMyInfo(submitForm)

    return (
        <Formik
            initialValues={initialValues}
            onSubmit={onSubmit}
            validationSchema={validationSchema}
        >
            {({ values, errors, touched, handleBlur, handleChange, handleSubmit }) => (
                <form onSubmit={handleSubmit}>
                    <Grid container direction="column" justifyContent="space-evenly" alignItems="center" >
                        <TextField
                            label="Name"
                            id="name"
                            name="name"
                            variant="standard"
                            value={values.name}
                            onChange={handleChange}
                            error={touched.name && Boolean(errors.name)}
                            helperText={touched.name && errors.name}
                        />
                        <TextField
                            label="Age"
                            id="age"
                            name="age"
                            variant="standard"
                            value={values.age}
                            onChange={handleChange}
                            error={touched.age && Boolean(errors.age)}
                        />
                        <TextField
                            label="Height"
                            id="height"
                            name="height"
                            variant="standard"
                            value={values.height}
                            onChange={handleChange}
                            error={touched.height && Boolean(errors.height)}
                        />
                        <TextField
                            label="Weight"
                            id="Weight"
                            name="weight"
                            variant="standard"
                            value={values.weight}
                            onChange={handleChange}
                            error={touched.weight && Boolean(errors.weight)}
                        />
                        <MuiPickersUtilsProvider utils={DateFnsUtils}>
                            <KeyboardDatePicker
                                format="dd/MM/yyyy"
                                variant="inline"
                                autoOk
                                value={values.date}
                                onChange={handleChange}
                            />
                        </MuiPickersUtilsProvider>
                        <Button color="primary" variant="contained" type="submit">Submit</Button>
                    </Grid>
                </form>
            )}
        </Formik>
    );
}

export default AddMyInfo

我可以以某种方式将日期从 AddMyInfo.js (onSubmit) 与 handleChange(formik) 传递到 useFormAddMyInfo 或者 AddMyInfo.js [date, setDate] 中的 delcare useState 使用 useState 设置日期并将其导入到 useFormAddMyInf 中。 如果您有任何建议，请分享，先谢谢了！

Answer 1

我只是用 TextFeild 替换了 MuiPickersUtilsProvide，并添加了 type='date' 的差异