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()

的第一个参数。

Answer 2

仅将位置寄存器更改为最后一个：

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

Answer 3

如果您不需要表单验证（即单选按钮组），另一种方法是在表单标签上设置

noValidate

。