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

当您将参数传递给 handleSubmit 时，您可以使用内联函数在提交时调用它。

<form className='login__form' onSubmit={() => handleSubmit(onSubmit)}>

Answer 2

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

Answer 3

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

      SendMessageResult sendMessageResult = new SendMessageResult();
        sendMessageResult.setMessageId("Dakota Johnson");
        sendMessageResult.setMD5OfMessageBody("It rocks");
        doReturn(CompletableFuture.completedFuture(sendMessageResult)).when(sqs).sendMessageAsync(any(SendMessageRequest.class), any());
        SendMessageRequest request = new SendMessageRequest();
        request.setMessageBody("Dakota Johsnon");
        request.setQueueUrl("None");
        SendMessageResult cf = sqsProducer.sendMessage(request).get();
        System.out.println(cf.getMessageId());

handleSubmit 反应钩子形式不起作用，它不执行 onSumbmit

3 个答案: