reactjs - handleSubmit react 钩子(Hook)形式不起作用，它不执行 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 的对象属性(property)。在您的输入文件中，您将覆盖 name它提供的(参见 register() 的结果传播到 <input> 的那一行的正下方的行)。这导致表单无法通过您设置的验证规则。 handleSubmit() 的第一个参数除非验证成功，否则不会被调用。