ObjectにuseRefを含めて子コンポーネントでレンダリングさせた際に、親からrefにうまくアクセスできない

Question

前提

React　17.0.2　Material-ui 5.0 を用いてフロントエンド開発を行っています。

テキストフィールド等のUIの情報を2階層のネストしたObjectにまとめて、子コンポーネントにmapでレンダリングさせるプログラムを実装しています。
この際、useRefオブジェクトをObjectに追加しましたが、親コンポ-ネントからRefを参照してフォーカスを合わせることができません。

実現したいこと

親コンポーネントからObjectを渡して、useRefでフォーカスをkey名を指定して移動させたい。
子コンポーネントでonClick等のイベントを実行した際にフォーカスを移動させたいです。

該当のソースコード

import ComponentList from 'components/molecules/ComponentList';
import { useState, useEffect, useRef, forwarfRef } from 'react';
import Stack from '@mui/material/Stack';
import { Typography } from '@material-ui/core';
import Snackbar from 'components/atoms/Snackbar';
import axios from 'api.js';


const hogeTextFieldRef = useRef();
const movehoge=()=>{
　　　componentList1.hogeTextfield2.ref.current.focus()
}
const [componentList1, setComponentlist] = useState({
       hogeTextfield1: {
            label: 'hoge',
            component: 'TextField',
            value: '',
            required: true,
            onClick: movehoge,
            key: 1,
            type: 'number',
            inputProps: { maxLength: 2, pattern: '^[0-9]' }
        },
        hogeTextfield2: {
            label: 'hoge',
            component: 'TextField',
            value: '',
            required: true,
            key: 2,
            type: 'number',
　　　　ref: hogeTextFieldRef,
            inputProps: { maxLength: 2, pattern: '^[0-9]' }
        },
        hogeTypography: {
            label: `hoge見出し`,
            component: 'Typography',
            key: 13,
            xs: 9
        }
}
  return (
        <>
            <Stack spacing={2}>
                <item>
                    <ComponentList lists={componentList1} setLists={setComponentlist}  />
                   
                </item>
            </Stack>
        </>
    );
}

// import Textfield from 'components/atoms/Textfield';
import TextField from '@mui/material/TextField';
import Button from 'components/atoms/Button';
import { MenuItem, Grid, Checkbox, Typography } from '@material-ui/core';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import * as React from 'react';
import Box from '@mui/material/Box';
import { useForm, Controller } from 'react-hook-form';
import axios from 'api.js';

const TextfieldList = React.forwardRef(({ lists, setLists }) => (
    <Grid container spacing={2} alignItems="center">
        {Object.keys(lists).map((key) => {
            const list = lists[key];
            // console.log('list:', list);
            switch (list.component) {
                case 'TextField':
                    return (
                        <Grid item xs={list.xs ? list.xs : 2}>
                            <item>
                                <TextField
                                    disabled={list.disabled}
                                    fullWidth
                                    label={list.label}

                                    key={list.key}
                                    required={list.required}
                                    value={list.value}
                                    inputRef={list.ref}
                                    onChange={(e) => {
                                        setLists({
                                            ...lists,
                                            [key]: {
                                                ...lists[key],
                                                value: e.target.value
                                            }
                                        });
                                        // console.log(list.setValue);
                                        // list.setValue(e.target.value);
                                    }}
                             
                                    onKeyPress={(e) => {
                                        if (e.key === 'Enter') {
                                            list.onClick(lists);
                                        }
                                    }}
                                    variant="outlined"
                                />
                            </item>
                        </Grid>
                    );
                case 'Typography':
                    return (
                        <Grid item xs={list.xs ? list.xs : 12}>
                            <Typography key={list.key} variant={list.variant}>
                                {list.label}
                            </Typography>
                        </Grid>
                    );
                case 'Button':
                    return (
                        <Grid item xs={list.xs ? list.xs : 10}>
                            <Button key={list.key} label={list.label} variant="contained">
                                {list.label}
                            </Button>
                        </Grid>
                    );

                default:
                    return <TextField key={list.key} label={list.label} required={list.required} value="aiu" />;
            }
        })}
    </Grid>
));

export default TextfieldList;

currentオブジェクトをconsoleに出力した際、focusメソッドがない状態となっています。

Comments

[maisumakun]

・ブラウザコンソールにエラーなどは出ていませんか？
・親コンポーネントから子コンポーネントはどのように生成していますか？

[maisumakun]

（誤解でしたので取り消し）

[suzuki999]

コメントありがとうございます。
Propsを渡す処理をソースに追加しました。
コンソール上でのエラー等はでていません(ビルド時)。
メソッド実行するとUndefinedとなります。
refオブジェクトをconsoleに出力した際はcurrentオブジェクト内にfocusメソッドがいない状態となってます。

[suzuki999]

子コンポーネント欄に記載している内容がComponentListとなっています。
ファイル名がComponentListということです。
TextFieldListというコンポーネント名のまま投稿してしまい申し訳ありません

Answer 1

currentオブジェクトをconsoleに出力した際、focusメソッドがない状態となっています。

メソッドはプロトタイプの側にあって、見つけきれていないだけではないでしょうか。

Comments

[suzuki999]

知識不足で申し訳ありません。
プロトタイプとは何を指していますか？

[maisumakun]

少なくとも、メソッドを呼んでエラーが発生していないということは、メソッドは存在しています。