React Hook 表单控制器问题

Question

我一直在使用带有本机元素的 React Hook 表单库，但想切换到使用控制器的自定义组件 API。

我的自定义输入组件更新 React 状态但未更新表单状态内的引用时遇到问题。因此，必填字段总是被标记为无效，我无法提交表单。

这是我的问题的演示：https://codesandbox.io/s/react-hook-form-controller-bofv5

它应该在提交时注销表单数据 - 但提交从未发生，因为表单无效。

Answer 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>
    </>
  );
}

顺便说一句，我从来没有用过这个库，所以只要你能相信我就相信我。

React Hook 表单控制器问题

React Hook Form Controller Issues

javascript

reactjs

react-hooks

react-hook-form