无法从Material UI DatePicker获取值

Question

我刚开始反应，现在我想拥有一个可重复使用的组件来输入日期，但我无法将值从组件返回到寄存器。

这是我的表单代码：

import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { Button } from "@mui/material";
import FDate from "../../Components/Forms/FDate";
function AltaArtista() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const onSubmit = async (data) => {
try {
console.log(data);
} catch (e) {}
};
return (
<div>
<FDate
label='Fecha de Nacimiento'
register={{ ...register("nacimiento", { required: true }) }}
/>
<Button variant='contained' type='submit'>
date input
</Button>
</form>
</div>
);
}

这是我的FDate组件

import * as React from "react";
import { TextField } from "@mui/material";
import DatePicker from "@mui/lab/DatePicker";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
function Fdate(props) {
const [value, setValue] = React.useState(new Date());
const handleDate = (newValue) => {
setValue(newValue);
console.log(newValue);
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label={props.label}
value={value}
onChange={handleDate}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
);
}
export default Fdate;

当我在handleDate中打印newValue时，我可以获得在datePicker中选择的时间，但返回到表单的值是应用程序启动时选择的日期，并且它不会更改，任何想法都将不胜感激。

Answer 1

在Fdate组件中，您没有使用从AltaArtista传递下来的register道具。表单状态由useForm钩子控制，因此不需要在"Fdate"中单独控制它。但是在声明useForm时，您应该设置nacimiento的默认(初始(值

const {
register,
handleSubmit,
formState: { errors },
} = useForm({
defaultValues: {nacimiento: new Date()}
});

然后在Fdate:内展开道具

import * as React from "react";
import { TextField } from "@mui/material";
import DatePicker from "@mui/lab/DatePicker";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
function Fdate(props) {
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
{...props}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
);
}
export default Fdate;