React hook Form

6355 ワード
React useForm hook テキストリンク
React Hook Form

  • react hookヘルプを使用してフォームを作成する

  • 設定npm i react-hook-form

  • 基本例
    •   import React from "react";
  import { useForm } from "react-hook-form";

  Interface Inputs = {
    example: string,
    exampleRequired: string,
  };

  export default function App() {
    const { register, handleSubmit, watch, errors } = useForm<Inputs>({mode: "onChange"});
    const onSubmit = data => console.log(data);
    const onSubmitInvalid = data => console.log(data);

    console.log(watch("example"))

    return (
      <form onSubmit={handleSubmit(onSubmit, onSubmitInvalid)}>

        <input name="example" defaultValue="test" ref={register} />
        <input name="exampleRequired" ref={register({ required: true })} />

        {errors.exampleRequired && <span>This field is required</span>}

        <input type="submit" />
      </form>
    );
  }
  • inputタグにnameを設定し、useFormで見つけられる
  • handleSubmit(onValid,onInValid):フォームを発行した場合、フォームが有効な場合、無効な場合に指定した機能を実行する
  • watch():リアルタイム変化検出
  • useFormのmode
  • onChange:値変化時の検証チェック
  • onBlor:input以外の検証検査
    • https://react-hook-form.com/kr
    『Android 1行目コード』first reading 9
    MySQLの文字列切り取り関数