fromのsubmitボタンが機能しない

現在ポートフォリオを作成しており、シンプルなログインページを作っているのですが、送信ボタンを押しても反応せず困ってます。
以前はうまくいっていたのに、リファクタリングをした途端うまくいかなくなりました。
コンパイルは出来ています

行いたいこと

・react-hook-formを使い送信（この場合、cosole.logも出来ていない）
・Chakra uiのbutton タグで送信したい

・リファクタリング内容
1 yupでSignupSchemaを抽象化
2 inputタグからbuttonタグへ変更

試したこと

fromの中に基本は入れたままtype=”submit”した
buttonタグからinput type=”submit”としても変わらない
関数はconsole.logにしたけど変わらない →consoleに表示されない
chakra uiのFormControlを1ラベルごとにタグで挟んだが変わらない
FormControlのisInvalid={errors}を削除したが変わらない
再度yarn add npm react-hook-form でインストールしなおし→buildし直し→変わらず。
一度全て消して、reacthookformのコードをコピペしてもできない

/* eslint-disable */
import React, { memo } from 'react';
import {
  Box,
  Divider,
  Flex,
  Heading,
  Input,
  Stack,
  FormControl,
  Button,
  FormErrorMessage,
  FormLabel,
} from '@chakra-ui/react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';

// hooks
import useAuth from '../../hooks/useAuth';

// リファクタリングしたスキーマ
import SignupSchema from '../../schema/SignupSchema';

const Login = memo(() => {
  const { login } = useAuth();
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: yupResolver(SignupSchema),
  });

  const onSubmit = (data) => {
    login(data);
  };
ここはconsole.logで試した箇所
  // const onSubmit = (data) => {
  //   // eslint-disable-next-line no-console
  //   console.log(data);
  // };
  // eslint-disable-next-line no-console
  // const onSubmit = (data) => console.log(data);

  return (
    <Flex alignItems="center" justifyContent="center" height="100vh">
      <Box bg="white" w="sm" p={4} borderRadius="md" shadow="md">
        <Heading as="h1" size="lg" textAlign="center">
          ログイン
        </Heading>
        <Divider my={4} />
          <form onSubmit={handleSubmit(onSubmit)}>
          <Stack spacing={6} py={4} px={10}>
            <FormControl isInvalid={errors}>
              <FormLabel htmlFor="email">email</FormLabel>
              <Input type="text" placeholder="email" {...register('email')} />
              <FormErrorMessage>{errors.email?.message}</FormErrorMessage>
              <FormLabel htmlFor="password">password</FormLabel>
              <Input type="password" placeholder="password" {...register('password')} />
              <FormErrorMessage>{errors.password?.message}</FormErrorMessage>
            </FormControl>
            <Button colorScheme="teal" isLoading={isSubmitting} type="submit">
              ログイン
            </Button>
ここのinputのコメントアウトはinputタグで試した場合。
            {/* <input type="submit" value="login" /> */}
          </Stack>
          </form> 
上のformを全て消して、react-hook-form公式からコピペしたコードで試したのがこちらのコメントアウト部分
        {/* <form onSubmit={handleSubmit(onSubmit)}>
          <input defaultValue="test" {...register('example')} />
          <input {...register('exampleRequired', { required: true })} />
          {errors.exampleRequired && <span>This field is required</span>}
          <input type="submit" />
        </form> */}
      </Box>
    </Flex>
  );
});

export default Login;

signupSchema.js

import * as yup from 'yup';

const SignupSchema = yup.object().shape({
  name: yup.string().max(50, '名前は50文字以内で入力して下さい').required('名前は必須です'),
  email: yup.string().email('正しいメールアドレスを入力してください').required('emailは必須です'),
  password: yup
    .string()
    .min(4, 'passwordは4文字以上で入力して下さい')
    .max(15, 'passwordは15文字以内で入力して下さい')
    .required('パスワードは必須です'),
  password_confirmation: yup.string().oneOf([yup.ref('password'), null], '再入力passwordが一致しません'),
});

export default SignupSchema;

お知恵をいただけると幸いです。

以下コンソールの情報を追記します

[HMR] Waiting for update signal from WDS...

login:1 [DOM] Found 2 elements with non-unique id #field-3: (More info: https://goo.gl/9p2vKq) <input type="text" placeholder="email" name="email" id="field-3" aria-invalid="true" class="chakra-input css-1c6j008" aria-describedby="field-3-feedback"> <input type="password" placeholder="password" name="password" id="field-3" aria-invalid="true" class="chakra-input css-1c6j008" aria-describedby="field-3-feedback">
login:1 [DOM] Input elements should have autocomplete attributes (suggested: "current-password"): (More info: https://goo.gl/9p2vKq) <input type="password" placeholder="password" name="password" id="field-3" aria-invalid="true" class="chakra-input css-1c6j008" aria-describedby="field-3-feedback">

webpackHotDevClient.js:138 src/hooks/useAuth.js

  Line 39:13:  Unexpected console statement  no-console

src/hooks/useAuthCheck.js
  Line 36:9:  Unexpected console statement  no-console

src/hooks/useGetFavo.js
  Line 23:11:  Unexpected console statement  no-console

src/hooks/useSignup.js
  Line 44:11:  Unexpected console statement  no-console
  Line 50:11:  Unexpected console statement  no-console
  Line 54:9:   Unexpected console statement  no-console
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210

修正したconsoleの内容とeventListerの画像

bottonの処理をconsole.logに変更した後のdevtook

退会済みユーザー

2022/02/14 02:37

例えばChromeのDevToolsのコンソールにて、なにかエラー表示は出ていませんでしたか？

kiyomasa

2022/02/15 23:35

閲覧、コメントありがとうございます。遅くなり申し訳ありません。コンソールの情報を一旦追記いたしました。また不明点などあればお知らせください。

行動規範の内容に同意します

回答1件

ベストアンサー

コンソールで報告されている、idのダブりは解消しましょうね。
掲載されているコード上で #field-3 指定で参照している箇所はなさそうですが、
それの影響でJavaScriptの処理（例えばイベント処理メソッド）が無視されてしまうこともあります。

また、
ボタン操作の処理が機能していないのであれば、
同じくChromeのDevTools上で該当要素のイベント処理をチェックします。
イベントリスナーとして登録されているか、登録されているなら該当箇所でブレークポイントを張って待ち構えることができるかなど。

投稿2022/02/16 00:05

退会済みユーザー

総合スコア0

kiyomasa

2022/02/16 01:20

ご回答ありがとうございます。 idのダブりは認識していなく、ご指摘ありがとうございます。調べるとchakra uiで自動でidが再番されるようです。他どこで使っているかもわからなかったので、idをきちんと定義したところ、ワーニングは消えました。その後、autoCompleteを設定せよというワーニングも出ていたので、それも対応しコンソールのワーニングは全て消しました。その上で再度送信ボタンを押したところ、それでも送信が出来ませんでした。 Chromeのdevtoolでイベント処理を見る方法を知らなかったので、こちら↓の記事を参考に調べて実施してみました。 https://iwb.jp/chrome-devtools-click-addeventlistener-settings-check/ みかたがよくわからなかったのですが、イベントはセットされているよう？です（画像を追記できないので、本文で追記します。）間違っていたらすみません。図々しく、申し訳ありません。まだ解決していないのですが、他調査する方法等ございますでしょうか・・・

kiyomasa

2022/02/22 01:35

その後、デバックツールでクリック時の挙動を何度も確認しました。するとsubmitの中にエラーを発見し、解決に至りました。実はリファクタリングの際、shemaをサインアップ時のとログイン時のでおんなじものにしており（大は小を兼ねる的な考えで、サインアップ時のshemaの方が項目が多いので、使えると勝手に判断していました） signupshemaで設定したnameの扱いが必須になっていたため、画面には出てないけどエラーになっていました改めて、login用のshemaを設定したらボタンを押して送信できました。お手数をおかけしました。ありがとうございます。

行動規範の内容に同意します