我正在尝试了解react-hook-form的工作方式。为此,我创建了以下示例:
import React from 'react';
import { useForm } from 'react-hook-form';
const InputForm = () => {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<>
<Form onSubmit={handleSubmit(onSubmit)}>
<Form.Group controlId='formBasicName'>
<Form.Label>Name</Form.Label>
<Form.Control
type='text'
name='name'
ref={register}
/>
</Form.Group>
<Form.Group controlId='formBasicEmail'>
<Form.Label>Email address</Form.Label>
<Form.Control
type='email'
name='email'
ref={register}
/>
<Button className='submitBtn' type='submit'>
Submit
</Button>
</Form>
</>
);
};
export default InputForm;
它有效,如果我提交表单,我可以在控制台中看到数据对象。唯一的问题是,每次提交后,输入框仍显示其值。我希望在每次提交后输入框的值都为空。使用useState会很容易,但是现在我正在使用react-hook-from,我不知道该怎么做。
使用此提交功能:
const onSubmit = (data, e) => {
e.target.reset();
};
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句