gpt4 book ai didi

reactjs - react-hook-form - 每次提交后为空输入字段

转载 作者:行者123 更新时间:2023-12-03 22:47:45 24 4
gpt4 key购买 nike

我试图了解 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 InputForm = () => {
const { register, handleSubmit, reset } = useForm();

const onSubmit = (data) => {
//...
reset();
};
将其添加到提交功能

关于reactjs - react-hook-form - 每次提交后为空输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62741410/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com