Field is missing `name` attribute

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のSelectinputRefがないから

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

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

そのため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

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

created by Rinker
¥1,663 (2024/03/28 13:12:00時点 Amazon調べ-詳細)

りーほー
りーほー

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

りーほー
りーほー

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

りーほー
りーほー

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする


The reCAPTCHA verification period has expired. Please reload the page.

目次