handleSubmit 反应钩子表单不起作用，它不执行 onSumbmit

Question

onSubmit 未执行，我不知道问题是什么，它在没有handleSumbit 的情况下执行，但我需要它从表单获取所有数据。我想我已经完成了该表格所需的一切，但它不起作用。我需要帮助？

import { useForm } from 'react-hook-form';

const LoginPage = () =>{

const { register, handleSubmit } = useForm();
const onSubmit = (data) => (
    alert(JSON.stringify(data))
);
  
return(
    <section className="section-login">
        <div className="login__header">
            <img src={anarLogo} className="login__header--logo" alt="header logo" />
        </div>
        <form className='login__form' onSubmit={handleSubmit(onSubmit)}>
            <Input
                register={register} 
                inputName='User name'
                inputType='text'
                inputClass='form__input--text' 
                inputPlaceholder='Username'
                // inputErrors = {errors}
                inputLabel = 'username'
                rules={{ required: true, maxLength: 20, min: 3 }}
            />
            <Input 
                register={register}
                inputName='Password'
                inputType='password'
                inputClass='form__input--password'
                inputPlaceholder='Password'
                // inputErrors = {errors}
                inputLabel = 'password'
                rules={{ required: true, maxLength: 20, min: 3 }}
            />
            <button type='submit'></button>
        </form>
    </section>
  )
 }

我的输入文件：

 const Input = ({register, inputName, inputType, inputClass, inputPlaceholder, inputLabel, 
     rules,}) => {


return(
    <div className='form__input'>
        <input
        {...register(inputLabel , {...rules})}
        name={inputName}
        type={inputType} 
        className={`input ${inputClass}`} 
        placeholder={ inputPlaceholder }
        />
    </div>
 )
}

export default Input;

Answer 1

该register()函数返回一个具有属性的对象name。在您的输入文件中，您将覆盖它提供的 (参见将结果传播到name的那一行正下方的行)。这导致表单无法满足您设置的验证规则。除非验证成功，否则不会调用 的第一个参数。register()<input>handleSubmit()