对其他文件中的字段使用register方法

Question

我想在表单字段中包含从Redux生成的ww。在我的情况下，我在其他文件中生成了它，它看起来像这样：

const PeopleContainer = ({ people }) => {
const { register, errors } = useForm();
return <select name="person_id" className="form-control" ref={register({ required: true })}>
{people.list.map(person =>
<option key={person.id} value={person.id}>{person.name}</option>
)}
</select>
{
errors.person_id&& (
<Error alert="To nie jest prawidłowy typ sieci" />
)
}
}

const mapStateToProps = state => ({
people: state.people
})
export default connect(mapStateToProps)(PeopleContainer)

在文件form.js中，我添加了这样的字段：

<div className="row">
<div className="col-12 col-md-2">
<label>People</label>
</div>
<div className="col-12 col-md-10">
<SelectPeople />
</div>
</div>

此代码正确生成，但不会发送具有此select值的ajax请求。这是解决我的问题的简单方法吗(用这个字段和值发送数据(，还是其他库更好地反应钩子形式？

Answer 1

我想你在追求FormProvider:

https://react-hook-form.com/api#useFormContext

您可以将所有自定义输入挂起，甚至进行深度嵌套。

import React from "react";
import { useForm, FormProvider, useFormContext } from "react-hook-form";
export default function App() {
const methods = useForm();
const onSubmit = data => console.log(data);
return (
<FormProvider {...methods} > // pass all methods into the context
<form onSubmit={methods.handleSubmit(onSubmit)}>
<NestedInput />
<input type="submit" />
</form>
</FormProvider>
);
}
function NestedInput() {
const { register } = useFormContext(); // retrieve all hook methods
return <input name="test" ref={register} />;
}