我一直在使用带有本机元素的 react 钩子表单库，但想切换到使用控制器 API 的自定义组件。
我的自定义输入组件更新 React 状态但未更新表单状态内的 ref 时遇到问题。因此，必填字段始终标记为无效，我无法提交表单。
这是我的问题的演示：https : //codesandbox.io/s/react-hook-form-controller-bofv5
它应该在提交时注销表单数据 - 但提交永远不会发生，因为表单无效。
React Hook 表单控制器问题
IT技术
javascript
reactjs
react-hooks
react-hook-form
2021-04-29 02:16:30
1个回答
我想我已经缩小了你的问题。首先，我rules={{ required: true }}从控制器中删除了并尝试了表单。它告诉我firstName: undefined。然后我注释掉了这个onChange属性。之后，表格工作正常。onChange如果您想提供自定义值提取器，似乎应该使用它。该值需要从函数返回。一个简单输入的例子是：onChange={([{target}]) => target.value} reference。此外，重要的是要注意handleSubmit使用值提取一些内部状态，就像您不需要自己跟踪这些状态一样。
这个更新的组件似乎正在工作：
function App() {
const { control, handleSubmit, errors } = useForm();
// const [data, setData] = useState({ firstName: "" });
const onSubmit = data => console.log(data);
// const onChangeHandler = e => {
// const { name, value } = e.target;
// const _data = { ...data };
// _data[name] = value;
// setData(_data);
// };
return (
<>
{/* <p>{JSON.stringify(data)}</p> */}
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
as={Input}
name="firstName"
id="firstName"
label="First Name"
control={control}
// value={data.firstName}
rules={{ required: true }}
errors={errors.firstName}
// onChange={([e]) => onChangeHandler(e)}
/>
<input type="submit" />
</form>
</>
);
}
顺便提一下，我从来没有使用过这个库，所以只要你能把我扔掉就相信我。