Field is missing `name` attribute

React
スポンサーリンク
language

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を使用する必要があります。

API ドキュメント
Performant, flexible and extensible forms with easy-to-use validation.

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がありません。

Select API - Material-UI
The API documentation of the Select React component. Learn more about the props and the CSS customization points.

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

他にもreact-select や react-datepickerinnerRef または 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でそれ自体を再登録させます。

入力状態:getValuesvalidate関数を活用して、条件付きで検証を返します。

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

この記事でわからないコードなどがあれば、書籍で勉強するのがおすすめです。
プログラミングの技術の移り変わりは早いので最新版の書籍を購入することをお勧めします。
中古本を買って勉強したけど、今は使われない技術だったということはよくあります。

javascript・Reactでおすすめの書籍をご紹介します。

りーほー
りーほー

JavaScriptを基礎からしっかり学びたい方におすすめ!

りーほー
りーほー

JavaScriptを基礎から応用までガッツリ学びたい方におすすめ!

りーほー
りーほー

Reactの概念や仕組みを把握し、開発で使えるReactを学びたい方にオススメ!

タイトルとURLをコピーしました