web-dev-qa-db-ja.com

Reactフックフォームコントローラの問題

ネイティブエレメントでreactフックフォームライブラリを使用していますが、コントローラーAPIを使用してカスタムコンポーネントに切り替えたいのですが。

カスタム入力コンポーネントの更新に問題がありますReact=状態ですが、フォーム状態内の参照を更新していません。そのため、必須フィールドは常に無効としてマークされ、フォームを送信できません。

これが私の問題のデモです： https://codesandbox.io/s/react-hook-form-controller-bofv5

送信時にフォームデータをログアウトする必要がありますが、フォームが無効であるため送信は行われません。

javascriptreactjsreact-hooksreact-hook-form
2
Summy

問題を絞り込んだと思います。まず、コントローラーから_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>
    </>
  );
}
_

余談ですが、私はこのライブラリで作業したことがないので、あなたが私を投げることができる限り、私を信頼してください。

4
Elias