javascript - 与 React-hook-form 库一起使用时，无法在 MUI 日期选择器中显示帮助程序文本

Question

我使用了react-hook-form库和material-ui。我一直在尝试通过 MUI 的帮助程序文本属性为日期选择器显示必填字段错误消息，但无法显示它。我收到同一表单中文本字段的错误消息。它甚至会记录在控制台中。但我无法渲染它。我认为这与出生日期 Controller 组件的实现有关。

import React from "react";
import { useForm, Controller } from "react-hook-form";
import TextField from "@mui/material/TextField";
import DatePicker from "@mui/lab/DatePicker";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";

export default function NewCandidateForm() {
  const {
    handleSubmit,
    formState: { errors },
    control,
  } = useForm();
  const onSubmit = (data) => console.log(data);
  console.log(errors);

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      style={{
        display: "flex",
        flexDirection: "column",
        width: "300px",
        rowGap: "20px",
      }}
    >
      <Controller
        name="firstName"
        control={control}
        defaultValue=""
        render={({ field: { onChange, value }, fieldState: { error } }) => (
          <TextField
            label="First Name"
            variant="filled"
            value={value}
            onChange={onChange}
            error={!!error}
            helperText={error ? error.message : null}
          />
        )}
        rules={{ required: "First name required" }}
      />

      <Controller
        name="lastName"
        control={control}
        defaultValue=""
        render={({ field: { onChange, value }, fieldState: { error } }) => (
          <TextField
            label="Last Name"
            variant="filled"
            value={value}
            onChange={onChange}
            error={!!error}
            helperText={error ? error.message : null}
          />
        )}
        rules={{ required: "Last name required" }}
      />

      <Controller
        name="dob"
        control={control}
        defaultValue=""
        render={({ field: { onChange, value }, fieldState: { error } }) => (
          <LocalizationProvider dateAdapter={AdapterDateFns}>
            <DatePicker
              label="Date of Birth"
              value={value}
              onChange={onChange}
              renderInput={(error) => (
                <TextField
                  {...error}
                  helperText={error ? error.message : null}
                />
              )}
              style={{
                paddingBottom: "10px",
                paddingTop: "10px",
                color: "white",
              }}
            />
          </LocalizationProvider>
        )}
        rules={{ required: "Date of birth required" }}
      />

      <Controller
        name="mobile"
        control={control}
        defaultValue=""
        render={({ field: { onChange, value }, fieldState: { error } }) => (
          <TextField
            label="Mobile"
            variant="filled"
            value={value}
            onChange={onChange}
            error={!!error}
            helperText={error ? error.message : null}
          />
        )}
        rules={{ required: "Mobile number required" }}
      />

      <input
        variant="contained"
        style={{
          height: "40px",
          width: "200px",
          alignItems: "center",
          marginTop: "20px",
          border: "hidden",
          borderRadius: "25px",
        }}
        type="submit"
      />
    </form>
  );
}

此外，我遇到的另一个问题是，在页面的第一次或初始渲染或加载时，日期选择器字段显示为红色，这象征着一个错误。

Answer 1

试试这个

//组件FormDatePicker

export interface FormDatePickerProps {
  name: string;
  label: string;
  control: any;
  defaultValue?: any;

}

function FormDatePicker({
  name,
  label,
  control,
  defaultValue,
}: FormDatePickerProps) {
  return (
    <Controller
      control={control}
      name={name}
      defaultValue={defaultValue ?? null}
      render={({ field: { onChange, value, ref }, fieldState }) => (
        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <DatePicker
            onChange={onChange}
            value={value}
            label={label}
            ref={ref}
            
            renderInput={(params) => (
              <TextField
                sx={{ width: '100%' }}
                {...params}
                error={Boolean(fieldState.error)}
                helperText={fieldState?.error?.message}
              />
            )}
          />
        </LocalizationProvider>
      )}
    />
  );
}

export default FormDatePicker;

你这样使用它

 <FormDatePicker
    name="birthdayDate"
    label="date"
    control={control}
    defaultValue={null}
/>