来自 Props 的控制台日志

Question

我很困惑，因为我设法通过不同的方式记录了我的数据，但我很困惑为什么当我对数据使用 props（而不是重复代码）时它不会记录输入。

作为参考，我有一个字段组件，它将使用道具来驱动我的 react-hook-form TextField 将请求什么。我想扩展组件，但在它记录我的数据之前，我无法继续！

以下是实际记录我的数据的代码：

import React from "react";
import { useForm, Controller } from "react-hook-form";
import { TextField, Button } from "@material-ui/core/";

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

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          control={control}
          name='firstName'
          render={({ field: { onChange, onBlur, value, name, ref } }) => (
            <TextField
              label='First Name'
              variant='filled'
              size='small'
              onBlur={onBlur}
              onChange={onChange}
              checked={value}
              inputRef={ref}
            />
          )}
        />
        <br />
        <br />
        <Button type='submit' variant='contained'>
          Submit
        </Button>
      </form>
    </div>
  );
};

export default NewRequest;

然后我已经移动了控制器，TextField 来创建一个组件：

import React from "react";
import { Controller, useForm } from "react-hook-form";
import { TextField } from "@material-ui/core/";

const TextFieldComponent = (props) => {
  const { name, label, size, variant } = props;
  const { control } = useForm();

  return (
    <div>
      <Controller
        control={control}
        name={name}
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <TextField
            label={label}
            variant={variant}
            size={size}
            onBlur={onBlur}
            onChange={onChange}
            checked={value}
            inputRef={ref}
          />
        )}
      />
    </div>
  );
};

export default TextFieldComponent;

我在另一个组件内部使用它（生成完整的表单）并通过我的道具（我将为 Button 制作一个不同的组件，但现在它就在它所在的位置）：

import React from "react";
import { useForm, Controller } from "react-hook-form";
import TextFieldComponent from "./form-components/text-field";
import { Button } from "@material-ui/core/";

const NewRequest= () => {
  return (
    <div>
      <TextFieldComponent
        name='firstName'
        label='First Name'
        size='small'
        variant='filled'
      />
      <br />
      <br />
      <Button type='submit' variant='contained'>
        Submit
      </Button>
    </div>
  );
};

export default NewRequest;

现在将该组件推送到 index.js 文件中以呈现表单：

import React from "react";
import NewVendorForm from "../components/new-vendor-request";
import { useForm } from "react-hook-form";

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <NewVendorForm />
    </form>
  );
};

export default Home;

我很困惑为什么这种方式会 a）按预期在我的表单中自定义我的 TextField b) 但不按要求记录我的数据

我确信有一个非常有效的基本原因，这是我对控制台日志记录缺乏了解，但我需要帮助来解决！

非常感谢。

Answer 1

问题在于，在重构代码中，您调用了两次useForm，每次都生成不同的control 和数据。您可能只想在顶层调用useForm，然后将您需要的任何内容（尤其是control）传递给表单字段。

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <NewVendorForm control={control} />
    </form>
  );
};

const NewRequest= ({control}) => {
  return (
    <div>
      <TextFieldComponent
        name='firstName'
        label='First Name'
        size='small'
        variant='filled'
        control={control}
      />
      <br />
      <br />
      <Button type='submit' variant='contained'>
        Submit
      </Button>
    </div>
  );
};

const TextFieldComponent = (props) => {
  const { name, label, size, variant, control } = props;

  return (
    <div>
      <Controller
        control={control}
        name={name}
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <TextField
            label={label}
            variant={variant}
            size={size}
            onBlur={onBlur}
            onChange={onChange}
            checked={value}
            inputRef={ref}
          />
        )}
      />
    </div>
  );
};