reactjs - 来自 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)但不按要求记录我的数据
我确信有一个非常有效的基本原因,这是我对控制台日志记录缺乏了解,但需要帮助来解决!
提前谢谢了。
解决方案
问题是,在重构的代码中,您调用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>
);
};
推荐阅读
- msbuild - 由于 MSB4019,travis 构建运行 msbuild 失败
- r - lm.fit(x, y, offset = offset,singular.ok =singular.ok, ...) 中的错误:0(非 NA)案例但没有 NA
- java - Android 通用音频资源对象
- javascript - setTimeout 我做错了吗?用于烟花
- javascript - 异步调用后如何向 {this.props.children} 添加比例
- python - Python Folium 搜索功能:如何按 FeatureGroup 搜索?
- sas - 基于另一行填充 1 行的 SAS 逻辑
- c - 如何以可以使用它们执行命令的方式解析链表元素
- python - 展平深度嵌套的 JSON 垂直转换为 pandas
- c++ - MPI_SEND - 将结构作为向量发送