从组件内部的组件调用时，函数 onSubmit 不会执行

Question

我的 next.js 项目中有一个使用 NavbarItem 组件的组件。

NavbarItem 组件使用 Login 来呈现登录表单。 该 NavbarItem 组件将 Login 组件作为函数的参数。

在此设置中，登录组件中

<form>

内的onSubmit调用的handleSubmit函数不会被调用。

这就是它的样子（两种方式都正确渲染登录组件）

但是当我直接使用Login组件函数handleSubmit时可以正常工作，如下所示：

<Login setLoginRenderCount={setLoginRenderCount} />

_{登录.jsx：}

'use client';
import React, {useState} from 'react';
export const Login = ({setLoginRenderCount}) => {
    const [form, setForm] = useState({});

    const handleChange = (e) => { 
      e.preventDefault();
        setForm({
            ...form,
            [e.target.name]: e.target.value
        })
     };

    const handleSubmit =  (e) => { 
      console.log('inside handleSubmit');
      e.preventDefault();
      
      };

  return (
    <>
      <div className='chat__bottom'>
        <form className='chat__bottom--container' onSubmit={handleSubmit}>
          <input className='chat__bottom--container__input' type='text' placeholder='Type Username' onChange={handleChange} name="username" />
          <br />
          <br />

          <input className='chat__bottom--container__input' type='text' placeholder='Type Password' onChange={handleChange} name="password" />
          <br />
          <br />
          
          <button className='chat__bottom--container__btn' type="submit" >Login</button>
        </form>
      </div>
    </>
  );
};

---

_{NavbarItem.jsx：}

import React from 'react';
import Link from 'next/link';

export const NavbarItem = ({ href, text, subMenuItems }) => {
  
  return (
    <li className='navbar--list__item'>
      <Link className='link-effect' href={href}>
        <span className='link-effect-inner'>
          <span className='link-effect-l'>
            <span>{text}</span>
          </span>
          <span className='link-effect-r'>
            <span>{text}</span>
          </span>
          <span className='link-effect-shade'>
            <span>{text}</span>
          </span>
        </span>
        {subMenuItems &&
             Array.isArray(subMenuItems) ? (
              <ul className='navbar--list__item--list'>
                {
                  subMenuItems.map((item, index) => (
                    <li key={index}>{item}</li>
                  ))
                }
              </ul>
            ) : null
          }
      </Link>
    </li>
  );
};

---

_{组件.jsx：}

'use client'
import React, { useEffect, useState } from 'react';
import {Login} from '/components/Navbar/NavbarAccount/Login';
import { NavbarItem } from '../NavbarItem';


const NavbarAccount = () => {
  const [loginRenderCount, setLoginRenderCount] = useState(0);

  return (
    <div className='navbar-login-container'>
      <NavbarItem href="/" text='Not logged in' 
      subMenuItems={[<Login setLoginRenderCount={setLoginRenderCount} key={'login'} />]} />

      <Login setLoginRenderCount={setLoginRenderCount} key={'11'} />
    </div>
  );
};

export default NavbarAccount;

我确实尝试调用 onHandle 函数，但当只有 onSubmit 函数不起作用时，它似乎工作正常。

Answer 1

我发现了解决方法。我改变了调用

handleClick

函数的方式。

登录.jsx：

        <form className='chat__bottom--container' >
          <input className='chat__bottom--container__input' type='text' placeholder='Type Username' onChange={handleChange} name="username" />
          <br />
          <br />

          <input className='chat__bottom--container__input' type='text' placeholder='Type Password' onChange={handleChange} name="password" />
          <br />
          <br />
          
          <button className='chat__bottom--container__btn' type="submit" onClick={handleSubmit}>Login</button>
        </form>

所以基本上现在按钮有 onClick 属性来调用正在运行的函数！ 似乎是这个特定环境的问题，并且仅当按钮尝试提交表单时出现。