React Hook Form & Material UI: 错误未定义

Question

我将 React Hook Form v7 与 Material UI v5 一起使用。我有一个简单的表单组件，如下所示。我已根据需要标记 TextField，但是，当字段的值为空时，错误状态和帮助文本永远不会显示。 errors.title 的值始终未定义。

我在这里做错了什么？我怎样才能让 React Hook 表单验证工作，即 errors?

import React from 'react';
import Grid from '@mui/material/Grid';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import { useForm, Controller } from 'react-hook-form';
import backEndApi from '../api/backEndApi';

const UserForm = function () {

  const { control, handleSubmit, formState: { errors }, getValues } = useForm();

  const onFormSubmit = (event) => {
    event.preventDefault();
    backEndApi.post(getValues());
  };

  return (
    <Grid container alignItems="center" justify="center" direction="column" paddingTop="10%">
      <form onSubmit={handleSubmit(onFormSubmit)}>
        <Grid container alignItems="center" justify="center" direction="column" spacing={5}>
          <Grid item>
            <Controller
              name="title"
              control={control}
              rules={{ required: true }}
              render={({ field }) => {
                return (
                  <TextField
                    {...field}
                    id="title"
                    label="Title"
                    required
                    error={errors.title}
                    helperText={errors.title && 'Title is required'}
                  />
                );
              }}
            />
          </Grid>
          <Grid item>
            <Button id="job-submit" color="primary" type="submit" variant="contained">
              Create Job
            </Button>
          </Grid>
        </Grid>
      </form>
    </Grid>
  );

};

export default UserForm;

Answer 1

我认为 rules 与 TextField 的 required 冲突。

我确认它有效。 (https://codesandbox.io/s/practical-chebyshev-9twrle?file=/src/userForm.js)

<Controller
  name="title"
  control={control}
  rules={{ required: true }}
  render={({ field }) => {
    return (
      <TextField
        {...field}
        id="title"
        label="Title"
        error={Boolean(errors.title)}
        helperText={errors.title && "Title is required"}
      />
    );
  }}
/>

此外，对于这种简单的情况，您不必用 Controller 换行。

示例：https://codesandbox.io/s/practical-chebyshev-9twrle?file=/src/userFormWithoutController.js

React Hook Form & Material UI: 错误未定义

React Hook Form & Material UI: errors are undefined

reactjs

material-ui

react-hook-form