Closed2022/04/17にクローズ1

【React・Material-ui】React-Hook-FormでMaterial-uiのRadioボタンを実装する。

React

Material-UI

React Hook Form

hiro

何について書く？

React-Hook-FormでMaterial-uiのRadioボタンを実装する方法

内容

前提：React-Hook-Formはformikなどと並ぶフォームライブラリーである。後発ということもあり、Reactレンダリング回数が少なくなるメリットを持つ。

UI ライブラリと連携する(その① そのまま組み合わせられる場合)

UI ライブラリ側のコンポーネントでinnerRef または ref を公開している場合はそれを適用するだけでOK。下記例はinnerRef属性に対応しているMaterial-ui TextFeildによる連携方法である。

 <TextField inputRef={register} label="First name" name="FirstName"/>

UI ライブラリと連携する(その②〜本題〜加工する場合)

UI ライブラリ側のコンポーネントでinnerRef または ref を公開していない場合は、加工が必要。その場合は、React-Hook-Formのラッパーコンポーネントである Controller を使用する。
加工前は下記Material-ui radioコンポーネント

import React from 'react';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';

export default function RadioButtonsGroup() {
  const [value, setValue] = React.useState('female');

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue((event.target as HTMLInputElement).value);
  };

  return (
    <FormControl component="fieldset">
      <FormLabel component="legend">Gender</FormLabel>
      <RadioGroup aria-label="gender" name="gender1" value={value} onChange={handleChange}>
        <FormControlLabel value="female" control={<Radio />} label="Female" />
        <FormControlLabel value="male" control={<Radio />} label="Male" />
        <FormControlLabel value="other" control={<Radio />} label="Other" />
        <FormControlLabel value="disabled" disabled control={<Radio />} label="(Disabled option)" />
      </RadioGroup>
    </FormControl>
  );
}

それをReact-Hook-Formと連携させる。下記（Material-ui radioコンポーネント加工後）

import React from 'react';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';

import FormLabel from '@material-ui/core/FormLabel';
import { useForm, Controller } from "react-hook-form";

const { handleSubmit, register, errors, control } = useForm();

export default function RadioButtonsGroup() {

  return (
    <Controller
  name="gender"
  control={control}  
  as={
    <RadioGroup aria-label="gender" name="gender1" >
      <FormControlLabel value="female" control={<Radio />} label="Female" />
      <FormControlLabel value="male" control={<Radio />} label="Male" />
      <FormControlLabel value="other" control={<Radio />} label="Other" />
      <FormControlLabel value="disabled" disabled control={<Radio />} label="(Disabled option)" />
    </RadioGroup>
  }
/>
  );
}

Controllerコンポーネントでラップして、asの中にレンダリングしたいコンポーネント（今回の場合radio）を書けば動く。

参考サイト

このスクラップは2022/04/17にクローズされました