无法从 Material UI DatePicker 获取值答案

【问题标题】：Cannot get value from Material UI DatePicker无法从 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 中选择的时间，但返回到表单的值是应用程序启动时选择的日期并且它不会改变，任何想法都会非常感激。

【问题讨论】：

标签： javascript reactjs datepicker material-ui

【解决方案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;

【讨论】：