无法从 Material UI DatePicker 获取值

Posted 2023-05-07

【中文标题】无法从 Material UI DatePicker 获取值

【英文标题】：Cannot get value from Material UI DatePicker

【发布时间】：2022-01-22 23:04:14

【问题描述】：

我是新手，现在我希望能够有一个可重复使用的组件来输入日期，但我无法将值从组件返回到寄存器。

这是我的表单代码：

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 中选择的时间，但返回到表单的值是应用程序启动时选择的日期并且它不会改变，任何想法都会非常感激。

【参考方案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;