常連

**◆バージョン**
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.12.1",

**◆していること**
・React Hook Formを使用してアカウント作成画面を作成しております。

・構造としてはわかりずらいかもしれませんが下記のように
アカウント作成画面のAccountCreate.tsxファイルと
入力(input)と登録(submit)のコンポーネントとしてformComponent配下に
formItems.tsxがあります。
my-app|src配下|formComponent配下|
|:--|:--:|--:|
src|AccountCreate.tsx||
||formComponent|
|||formItems.tsx


・見た目かこんな感じです。
![イメージ説明](3e9d7572f1b0d35248a2fdf4eb9050b6.png)

・コードは下記になります。
AccountCreate.tsx(見た目に関するコードは省略しています)
```TypeScript
import React, {ReactElement, useEffect, useState} from "react";
import { FormProvider, useForm } from 'react-hook-form';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import { FormInputComponent, FormSubmitComponent } from './formComponent/formItems';

type formInput = {
  name: string;
  searchId: string;
}

function AccountCreate(): ReactElement {

  const methods = useForm<formInput>({
    defaultValues: {
      name: '',
      searchId: '',
    },
  });

  const [input, setInput] = useState<formInput>({
    name: '',
    searchId: '',
  });

  const { handleSubmit, watch } = methods;

  useEffect(() => {
    setInput({
      name: watch('name'),
      searchId: watch('searchId'),
    });
  }, [watch('name'), watch('searchId')]);

  return(
    <section className={classes.section}>
      <Box border={1} borderRadius="borderRadius" className={classes.box}>
        <h1 className={classes.setFont}>アカウント作成</h1>
        <FormProvider {...methods}>
          <form className={classes.root} noValidate autoComplete="off" onSubmit={handleSubmit((data) => console.log(data))}>
            <div className={classes.setMargin}>
              <FormInputComponent labelText="名前" name="name" type="text" id={0} setClassName="js-account-icon" />
              <FormInputComponent labelText="ID" name="searchId" type="text" id={1} setClassName="js-search-icon" />
              <FormSubmitComponent submitText="登録"/>
            </div>
          </form>
        </FormProvider>
      </Box>
    </section>
  );
};

export default AccountCreate;
```
formItems.tsx(見た目に関するコードは省略しています)
```TypeScript
import React, { VFC } from "react";
import { useFormContext } from 'react-hook-form';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import AccountCircle from '@material-ui/icons/AccountCircle';
import SearchIcon from '@material-ui/icons/Search';
import Button from '@material-ui/core/Button';
import { withStyles, makeStyles, createStyles, Theme } from '@material-ui/core/styles';
// import { useContext } from "react";

const CssTextField = withStyles({
。。。
})(TextField);

type iProps = {
    labelText: string;
    name: string;
    type: 'text' | 'password' | 'number' | 'submit';
    id: number;
    setClassName: string;
};

type sProps = {
    submitText: string;
};

export const FormInputComponent: VFC<iProps> = ({
    labelText,
    name,
    type,
    id,
    setClassName,
}) => {
    const { register } = useFormContext();

    const displayIcon = ()=>{
        if(id === 0){
            return <AccountCircle className={setClassName} />;
        }else if(id === 1){
            return <SearchIcon className={setClassName} />
        }
    };

    return(
            <div className={classes.inputWrap}>
                <Grid container spacing={1} className={classes.inputContainer}>
                    <Grid item>
                        {displayIcon()}
                    </Grid>
                    <Grid item>
                        <CssTextField required id="input-with-icon-grid" {...register(name, { required: true })} label={labelText} />
                    </Grid>
                </Grid>
            </div>
    );
};

export const FormSubmitComponent: VFC<sProps> = (({
    submitText,
}) => {

    return(
        <div className={classes.buttonContainer}>
            <Button className={classes.button} type='submit' variant="outlined">{submitText}</Button>
        </div>
    );
});
```
◆現在の状況
名前とIDを入力して登録ボタンをクリックしてもConsoleに入力情報が表示されないのと
watchでの値の監視ができておりません。
また下記の注意内容がConsoleに表示されております。
```console
@typescript-eslint/no-unused-vars
  Line 76:6:   React Hook useEffect has a missing dependency: 'watch'. Either include it or remove the dependency array                                  react-hooks/exhaustive-deps
  Line 76:7:   React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
  Line 76:22:  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
  Line 76:41:  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps                                                                                     @typescript-eslint/no-unused-vars
```
◆解決したいこと
値を入力して登録ボタンをクリックしたらConsoleに入力情報が表示されたいのと
watchでの値の監視をできるようにしたいです。
自分が調べてみた限りコンポーネントをimportしネストしてuseFormを使用する時は
FormProviderとuseFormContextを使用することでコンポーネント先でもregister等を
使用できる認識でいます。
試しにimportせずにAccountCreate.tsxに直接input要素を記載し
値を入力して登録ボタンをクリックしたらConsoleに入力情報が表示され
watchでの値の監視もできていました。
なのでuseFormContextの書き方がおかしいのかと思っていますが調べてみても直し方が分かりません。
もし分かる方がいらっしゃればご教示頂きたいです。お願い致します。

	@@ -1,1 +1,1 @@
1	- react-hook-form useForm~~,useFormContextを使用した~~値の受け~~渡しができ~~ない
1	+ react-hook-form useForm 値を受け取れない

質問編集履歴