与 React Hook Forms 一起使用时获取 Material UI 日期选择器的默认值

Question

我正在使用 Material UI 构建一个包含 3 个字段的表单 (1) 日期 (2) 时间 (3) 评论。默认情况下，MUI 日期选择器字段默认为今天的日期。所以当我填充剩余字段（即小时和评论）并提交表单时，我没有在我的数据对象中看到日期值。相反，我必须明确 select 一个日历日期并提交，然后 DATA 对象会填充日期选择器值。

这导致我在通过 API 调用将数据提交到数据库时遇到问题。任何人都遇到过这类问题..？在这种情况下如何正确捕获日期值。

下面是代码

import React, { useState } from "react";
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import DateFnsUtils from "@date-io/date-fns";
import {
  MuiPickersUtilsProvider,
  KeyboardTimePicker,
  KeyboardDatePicker,
} from "@material-ui/pickers";
import { useForm, Controller } from "react-hook-form";
import AddTime from "./AddTime";


export default function Form({ user }) {

  const { handleSubmit, control, reset } = useForm({});
  const onSubmit = (data) => console.log(data);


  return (
    <React.Fragment>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Grid container spacing={3}>
          <Grid item xs={12} sm={6}>
            <MuiPickersUtilsProvider utils={DateFnsUtils}>
              <Controller
                name="date"
                control={control}
                render={({ field: { ref, ...rest } }) => (
                  <KeyboardDatePicker
                    margin="none"
                    id="date-picker-dialog"
                    label="Select date"
                    format="MM/dd/yyyy"
                    KeyboardButtonProps={{
                      "aria-label": "change date",
                    }}
                    {...rest}
                  />
                )}
              />
            </MuiPickersUtilsProvider>
          </Grid>
          <Grid item xs={12} sm={6}>
            <Controller
              render={({ field, fieldState: { error } }) => (
                <TextField
                  {...field}
                  label="Enter Hours"
                  variant="standard"
                  size="small"
                  error={!!error}
                  helperText={error ? error.message : null}
                />
              )}
              name="hours"
              control={control}
              rules={{ required: "Enter Hours" }}
            />
          </Grid>
          <Grid item xs={12}>
            <Controller
              render={({ field, fieldState: { error } }) => (
                <TextField
                  {...field}
                  label="Enter Comments if any"
                  variant="standard"
                  size="small"
                  multiline
                  fullWidth
                  error={!!error}
                  helperText={error ? error.message : null}
                />
              )}
              name="comment"
              rules={{ required: "Enter Comments" }}
              control={control}
            />
          </Grid>
          <Grid item xs={12}>
            <Button
              variant="contained"
              color="primary"
              type="submit"
              size="small"
            >
              submit
            </Button>
            <br />
            <br />
            <Button
              variant="contained"
              color="primary"
              size="small"
              onClick={() => {
                reset({
                  date: new Date(),
                  hours: "",
                  comment: "",
                });
              }}
            >
              Reset Form
            </Button>
          </Grid>
        </Grid>{" "}
      </form>
    </React.Fragment>
  );
}

下面是控制台日志的截图。当我点击提交时，日期显示为未定义

当我手动更改日期并提交时，填充正常。

提前致谢 - Venkata Penumatsa

Answer 1

问题是您没有为 <Controller /> 组件设置 defaultValue。这是外部控制组件所必需的，例如 Material UI 组件。

You need to either provide defaultValue at the field-level or useForm with defaultValues.

Here 是文档中的相关部分。

与 React Hook Forms 一起使用时获取 Material UI 日期选择器的默认值

Fetching the default value of Material UI Date Picker when used with React Hook Forms

reactjs

material-ui

next.js

react-hook-form