React Hook Form Controller 問題

Question

我一直在使用帶有本機元素的反應鈎子表單庫，但想使用 Controller API 切換到自定義組件。

我的自定義輸入組件更新 React state 但沒有更新表單 state 中的 ref 時遇到問題。 因此，必填字段始終被標記為無效，我無法提交表單。

這是我的問題的演示： https://codesandbox.io/s/react-hook-form-controller-bofv5

它應該在提交時注銷表單數據 - 但提交永遠不會發生，因為表單無效。

Answer 1

我想我已經縮小了你的問題。 首先，我從 controller 中刪除了rules={{ required: true }}並嘗試了表單。 它告訴我firstName: undefined 。 然后我注釋掉了onChange屬性。 之后，表格工作正常。 如果您想提供自定義值提取器，似乎應該使用onChange 。 該值需要從 function 返回。 一個簡單輸入的示例如下： onChange={([{target}]) => target.value} reference 。 此外，需要注意的是， handleSubmit提取一些內部 state 的值，就像您不需要自己跟蹤這些值一樣。

這個更新的組件似乎正在工作：

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

只是一個旁注，我從來沒有使用過這個圖書館，所以只要你能折騰我就相信我。