функция onSubmit реагирует, не стреляя

Question

В моей форме есть функция onSubmit, которая не срабатывает, когда пользователь нажимает кнопку отправки, и я не могу понять, почему. Вот функция:

 const handleSubmit = useCallback(
    e => {
      e.preventDefault();

     console.log("hello")
    },
    []
  );

Вот форма, к которой применяется функция:

<>
      <input className="c-checkbox" type="checkbox" id="checkbox" />
      <div className="c-formContainer">
        <form className="c-form" onSubmit={handleSubmit}>
          <input
            className="c-form__input"
            placeholder={notifyMeInput.input.placeholder}
            type="email"
            onChange={handleChange}
            pattern={emailRegex}
            required
          />

          <label className="c-form__buttonLabel" for="checkbox">
            <button className="c-form__button" type="submit">
              {notifyMeInput.button}
            </button>
          </label>
          <label
            className="c-form__toggle"
            for="checkbox"
            data-title={notifyMeInput.label}
          />
        </form>
      </div>
    </>

Когда я нажимаю кнопку отправки, ничего не происходит, и я не знаю почему. Любая помощь будет высоко ценится.

Answer 1

Здравствуйте, когда я проверяю его как следует, он отлично работает

import React, { useCallback } from "react";

function Home() {

  const handleSubmit = useCallback(
    e => {
      e.preventDefault();
      alert("hello")
    },
    []
  );

  return (
    <div>
      <h1>API data</h1>
      <form className="c-form" onSubmit={handleSubmit}>
        <input
          className="c-form__input"
          type="email"
        />
        <label className="c-form__buttonLabel" for="checkbox">
          <button className="c-form__button" type="submit">
            Send
          </button>
        </label>
        <label
          className="c-form__toggle"
          for="checkbox"
        />
      </form>
    </div>
  )
}

export default Home;

Не могли бы вы опубликовать свой полный компонент для дальнейшей проверки.

Answer 2

Вы можете попробовать это

const handleSubmit = e => {
  e.preventDefault();
  console.log("hello");
};