material ui + react-hook-form Ratingのvalueを所得してみた #JavaScript

formの値を所得する時react-hook-formという便利なライブラリが存在します。
しかし、UIライブラリを使用するとうまく反映されない時があります。
material uiのRatingを例に出して、その対処法をご紹介します。
今回は、UIライブラリを使った時の対処法についての紹介なので、基本的な使い方はある程度わかっているとして記事を書かせていただきます。

react-hook-formの基本的なコード

以下のコードは、ボタンを押した時にデータをlogに表示させるだけのコードで
react-hook-formの初歩的な使い方です。
ベースはこのコードで書いていきます。

import React from 'react';
import { useForm } from 'react-hook-form';

const Form = () => {
  const { register, handleSubmit } = useForm()
  const submit = (data) => {
    console.table(data)
  }
  return (
    <form onSubmit={handleSubmit(submit)}>
      <input
        name="text"
        ref={register} />
    </form>
  );
}

export default Form;

material uiの導入（registerを入れられる場合）

ここからmaterial uiを導入します。
が、まず使うUIにregisterに使用できるinnerRef または ref を公開しているかどうかを確認します。
公開している例で言うとmaterial ui のTextFieldです。この場合はinputRefを公開していて
その中に登録するためのregisterを入力します。

実装する場合は

yarn add @material-ui/core 
か
npm install @material-ui/core

をしてインストールしてください。

import React from 'react';
import { useForm } from 'react-hook-form';
import TextField from '@material-ui/core/TextField'

const Form = () => {
  const { register, handleSubmit } = useForm()
  const submit = (data) => {
    console.table(data)
  }
  return (
    <form onSubmit={handleSubmit(submit)}>
      <TextField
        name="text"
        inputRef={register} />
    </form>
  );
}

export default Form;

material uiの導入(registerを入れられない場合)

次はregisterに使用できるinnerRef または ref を公開していない例です。今回は例としてmaterial uiのRatingを使って実装します。
上と同様に実装する場合は

yarn add @material-ui/lab
または
npm install @material-ui/lab

をしてインストールしてください。

import Rating from "@material-ui/lab/Rating"
import {useForm ,Controller} from "react-hook-form"

const  Form=()=> {
  const {control,handleSubmit}=useForm()
  const sub=(data)=>{
    console.table(data)
  }

  return (
      <form onSubmit={handleSubmit(sub)}>
      <Controller
      name="reviews"
      control={control}
      defaultValue={2.5}
      precision={0.5}
      as={Rating}
      />
      <button>sub</button>
      </form>
  );
}

export default Form;

material uiからRatingをreact-hook-formからはuseFormとControllerをインポートします。
controlとhandleSubmitを定義します。
formタグの中にControllerタグを配置してその中に以下の属性を追加していきます。
- name : react-hook-formで登録のkeyとなるもの（ユニークなものにする）
- control : ここにはreact-hook-formに登録するためのメソッドが入っておりほぼrefにはいってるregisterと思っていいと思う(registerと同じようにcontrolをuseFormから定義すれば良い)
- defaultValue : 初期値
- precision : 区切り値
- as : ここにUIのライブラリ等を入れる

まとめ

以上のように簡単にformの値を扱えるためreact-hook-formは優秀なあと思います。
またバリデーション等も充実していてエラー文を表示することも簡単なため是非使っていただきたいライブラリです。
今回はほぼreact-hook-formを使ったことがない人でもわかるようにとおもい作りました。
誰かのためになれば幸いです。

詳細は
https://react-hook-form.com/get-started
の記事に書かれているので詳しく知りたい方は↑