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

Question

我正在使用 Material UI 构建一个表单，其中包含 3 个字段 (1) 日期 (2) 小时 (3) 评论。 默认情况下，MUI 日期选择器字段默认为今天的日期。 因此，当我填充其余字段（即小时和评论）并提交表单时，我在 DATA 对象中没有看到日期值。 相反，我必须明确选择一个日历日期并提交，然后 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 组件）所必需的。

您需要在字段级别提供 defaultValue 或 useForm 与 defaultValues。

这是文档中的相关部分。