Field is missing `name` attribute

2022年6月15日

Material-UIのSelectにReact Hook Formを次のコードのように導入しました。

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


export default function Form(props) {
    const { register, handleSubmit, errors, control } = useForm({
      criteriaMode: 'all',
    });
  
    return (
      <form method="POST">
        ...
        <Select name="select_name" inputRef={register({ required: '入力してください。' })}>
          <MenuItem value="1">選択1</MenuItem>
          <MenuItem value="2">選択2</MenuItem>
          <MenuItem value="3">選択3</MenuItem>
        </Select>
        ...
      </form>
    );
  }

しかし、次のようにエラーが出てしまいます。

index.esm.js:1258 ???? Field is missing `name` attribute {node: input.MuiSelect-nativeInput, value: undefined, focus: ƒ}...

この記事ではMaterial-UIのSelectにReact Hook Formを導入した際に出るエラーの解決方法を原因をご紹介します。

解決方法はReact Hook Formの`Controller`を使用

Material-UIのSelectにReact Hook Formを導入するにはReact Hook FormのControllerを使用する必要があります。

https://react-hook-form.com/jp/api#Controller

React Hook FormのControllerは以下のように使用します。

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


export default function Form(props) {
    const { register, handleSubmit, errors, control } = useForm({
      criteriaMode: 'all',
    });
  
    return (
      <form method="POST" >
        ...
        <Controller
          name="select_name"
          control={control}
          rules={{required: '入力してください。'}}
          render={({ onChange, value, ref }) => (
            <Select inputRef={ref} value={value} onChange={(event) => onChange(event.target.value)}>
              <MenuItem value="1">選択1</MenuItem>
              <MenuItem value="2">選択2</MenuItem>
              <MenuItem value="3">選択3</MenuItem>
            </Select>
          )}
        />
        ...
      </form>
    );
  }

原因はMaterial-UIの`Select`にinputRefがないから

Material-UIのSelectに限らずコンポーネントによって、inputRefがありません。

https://material-ui.com/api/select/

そのためReact Hook FormのregisterをMaterial-UIのSelectが受け付けることができないので、エラーが出てしまいます。

他にもreact-select や react-datepickerはinnerRef または refを受け付けることがなくReact Hook Formのregisterは使用できないので、React Hook FormのControllerを使用して導入します。

まとめ

Material-UIのSelectのpropsにはinnerRef がなく、React Hook Formのregisterを受け入れることができません。

React Hook FormのControllerを使用するとMaterial-UIのSelectでも導入してください。
React Hook FormのControllerの使い方は以下のコードの通りです。

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


export default function Form(props) {
    const { register, handleSubmit, errors, control } = useForm({
      criteriaMode: 'all',
    });
  
    return (
      <form method="POST" >
        ...
        {/* <Select name="select_name" inputRef={register({ required: '入力してください。' })}>
          <MenuItem value="1">選択1</MenuItem>
          <MenuItem value="2">選択2</MenuItem>
          <MenuItem value="3">選択3</MenuItem>
        </Select> */}

        <Controller
          name="select_name"
          control={control}
          rules={{required: '入力してください。'}} // バリデーション
          render={({ onChange, value, ref }) => (
            <Select inputRef={ref} value={value} onChange={(event) => onChange(event.target.value)}>
              <MenuItem value="1">選択1</MenuItem>
              <MenuItem value="2">選択2</MenuItem>
              <MenuItem value="3">選択3</MenuItem>
            </Select>
          )}
        />
        ...
      </form>
    );
  }

また、Controllerにバリデーションを定義するにはrulesにオブジェクトを入れます。

register によるバリデーションルール。
ローカル状態：更新された検証でregister入力ルールまたはuseEffectでの入力をunregisterし、Controllerに更新されたrulesでそれ自体を再登録させます。
入力状態：getValuesでvalidate関数を活用して、条件付きで検証を返します。
https://react-hook-form.com/jp/api/#Controller

下記に参考書をまとめておきます。