useForm数据没有显示在控制台中

Question

我正在开发gmail-clone，我使用useForm来验证数据。当我在表单中输入数据并将其打印到控制台时，什么也没有发生

const onSubmit = (data) => {
console.log(data);
};

<form onSubmit={handleSubmit(onSubmit)}>
<input name='to' placeholder='To' type='text' {...register('to', { required: true })} />
<input name='subject' placeholder='Subject' type='text' {...register('subject', { required: true })} />
<input name='message' placeholder='Type your message here...' type='text' className='sendMail_message' {...register('message', { required: true })} />
<div className='sendMail_options'>
<Button className='sendMail_send'>Send</Button>
</div>
</form>

Answer 1

在button组件中pass type='submit' prop。

<Button type='submit' className='sendMail_send'>Send</Button>

Answer 2

<script type="text/javascript">
function getFormData(formId){
let keyValueList = [];
let form = document.getElementById(formId)// get the form somehow
for ( let i = 0; i < form.elements.length; i++ ) {
let e = form.elements[i];
if(e.name!=='') {
keyValueList[encodeURIComponent(e.name)] = encodeURIComponent(e.value);
}
}
return keyValueList;
}
const onSubmit = () => {
let data = getFormData('formId');
console.log(data)
//todo: validate data
return false;
};
</script>
<form onsubmit="return onSubmit()" id="formId" >...</form>