React Hook Form - 当状态脏时值属性消失了

Question

我正在使用react-hook-form来管理表单状态。 但是当我开始在文本字段中输入时，devtool 中显示的值属性消失了。

UI初始状态。

如上图所示，value 为 null 或空字符串。 现在，当我开始输入时，值属性从开发工具中消失了。

这是登录屏幕代码。

import React from "react";
import { useForm } from "react-hook-form";
import { MuiTypography } from "../../components/mui/typography/Typography";
import { MuiStack } from "../../components/mui/layouts/Stack";
import { MuiBox } from "../../components/mui/layouts/Box";
import { MuiPaper } from "../../components/mui/layouts/Paper";
import { MuiAvatar } from "../../components/mui/data-display/Avatar";
import { MuiTextField } from "../../components/mui/form-controls/TextField";
import { MuiButton } from "../../components/mui/form-controls/Button";
import { DevTool } from "@hookform/devtools";

export const Login = () => {
  const {
    handleSubmit,
    register,
    formState: { errors },
    control,
  } = useForm({
    defaultValues: {
      email: "",
      password: "",
    },
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <MuiStack align="center" mt={2}>
      <MuiTypography component={"h1"} variant={"h4"} text={"Security Login"} />
      <form onSubmit={handleSubmit(onSubmit)} noValidate>
        <MuiPaper m={2} p={2} sx={{width: "400px"}} elevation={5}>
          <MuiStack mt={2} p={2} >
            <MuiBox flex={1} direction={"row"}>
              <MuiAvatar src={require("./assets/logo.png")} height={100} width={100}/>
            </MuiBox>
            <MuiTextField
              label={"Email"}
              type={"text"}
              {...register("email", { required: "Email is required" })}
              error={!!errors.email}
              helperText={errors.email?.message}
            />
            <MuiTextField
              label="Password"
              type="password"
              {...register("password", { required: "Password is required" })}
              error={!!errors.password}
              helperText={errors.password?.message}
            />
            <MuiButton
              type={"submit"}
              variant="contained"
              color="primary"
              text="Login"
            />
          </MuiStack>
        </MuiPaper>
      </form>
      <DevTool control={control} />
    </MuiStack>
  );
};

您可能还需要 MuiTextField 组件代码。所以就在这里。

import { TextField } from '@mui/material'

export const MuiTextField = ({
  label,
  type,
  error,
  helperText,
  variant = "outlined",
  color = "primary",
  size = "small",
  // inputProps,
  // value,
  // handleChange,
  ...rest
}) => {
  return (
    <TextField
      label={label}
      type={type}
      error={error}
      helperText={helperText}
      variant={variant}
      color={color}
      size={size}
      // inputProps={inputProps}
      // value={value}
      // onChange={handleChange}
      {...rest}
    />
  );
};

我对以下道具进行了评论，只是为了确认这些道具是否存在冲突，但行为仍然相同。

• inputProps={inputProps}
• 值={值}
• onChange={handleChange}

注意： 如果我直接从 MUI 使用 Textfield，我会得到预期的行为。但使用自定义组件是必需的。 :)

Answer 1

该问题是由于缺少我们需要传递的参考而造成的。 在自定义组件中添加forwardRef钩子实现后，我得到了预期的结果。

这是更新后的组件。

export const MuiTextField = React.forwardRef(
  (
    {
      label,
      type,
      error,
      helperText,
      variant = "outlined",
      color = "primary",
      size = "small",
      inputProps,
      value,
      handleChange,
      ...rest
    },
    ref
  ) => (
    <TextField
      label={label}
      type={type}
      error={error}
      helperText={helperText}
      variant={variant}
      color={color}
      size={size}
      ref={ref}
      inputProps={inputProps}
      value={value}
      onChange={handleChange}
      {...rest}
    />
  )
);