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

用户名

我正在尝试了解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,我不知道该怎么做。

ShinaBR2

使用此提交功能:

const onSubmit = (data, e) => {
  e.target.reset();
};

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React-hook-form输入字段匹配验证最佳实践

来自分类Dev

关于提交和useState问题的React-hook-form

来自分类Dev

从我的表单获取空数据对象react-hook-form

来自分类Dev

从我的表单获取空数据对象react-hook-form

来自分类Dev

React Native React-Hook-Form重置

来自分类常见问题

react-hook-form的DefaultValues没有将值设置为React JS中的Input字段

来自分类Dev

react-hook-form的DefaultValues没有将值设置为React JS中的Input字段

来自分类Dev

React-hook-form如何彼此交互?

来自分类Dev

来自react-hook-form的数据

来自分类Dev

react-hook-form验证不适用于自定义字段数组

来自分类Dev

如何在react-hook-form fieldArray中保留字段?

来自分类Dev

react-hook-form:表单状态和输入状态之间双向映射的惯用方法

来自分类Dev

如何将react-hook-form组成组件

来自分类Dev

React Form Hook:再次使选择器的宽度相等

来自分类Dev

如何使用useEffect()更改React-Hook-Form defaultValue?

来自分类Dev

如何在类Component内使用react-hook-form?

来自分类Dev

react-hook-form和material-ui FormControl

来自分类Dev

如何对嵌套数组使用react-hook-form

来自分类Dev

未与useFieldArray保存的react-hook-form id

来自分类Dev

react-hook-form撤消表单到以前的状态

来自分类Dev

如果输入在材质ui对话框中,则react-hook-form的setValue方法不起作用

来自分类Dev

UseEffect React Hook中的空innerText

来自分类Dev

可以使用带有react-hook-form和react-input-mask的reactstrap吗?

来自分类Dev

如何使用react-hook-form在React中存储无线电组的状态

来自分类Dev

尝试将react-hook-form与react-input掩码结合使用

来自分类Dev

TypeError:寄存器不是在React中使用React Hook Form的函数

来自分类Dev

Jest Testing React Form提交

来自分类Dev

react-hook-form-控制器在第一次更改时未更新

来自分类常见问题

react-hook-form处理handleSubmit中的服务器端错误

Related 相关文章

  1. 1

    React-hook-form输入字段匹配验证最佳实践

  2. 2

    关于提交和useState问题的React-hook-form

  3. 3

    从我的表单获取空数据对象react-hook-form

  4. 4

    从我的表单获取空数据对象react-hook-form

  5. 5

    React Native React-Hook-Form重置

  6. 6

    react-hook-form的DefaultValues没有将值设置为React JS中的Input字段

  7. 7

    react-hook-form的DefaultValues没有将值设置为React JS中的Input字段

  8. 8

    React-hook-form如何彼此交互?

  9. 9

    来自react-hook-form的数据

  10. 10

    react-hook-form验证不适用于自定义字段数组

  11. 11

    如何在react-hook-form fieldArray中保留字段?

  12. 12

    react-hook-form:表单状态和输入状态之间双向映射的惯用方法

  13. 13

    如何将react-hook-form组成组件

  14. 14

    React Form Hook:再次使选择器的宽度相等

  15. 15

    如何使用useEffect()更改React-Hook-Form defaultValue?

  16. 16

    如何在类Component内使用react-hook-form?

  17. 17

    react-hook-form和material-ui FormControl

  18. 18

    如何对嵌套数组使用react-hook-form

  19. 19

    未与useFieldArray保存的react-hook-form id

  20. 20

    react-hook-form撤消表单到以前的状态

  21. 21

    如果输入在材质ui对话框中,则react-hook-form的setValue方法不起作用

  22. 22

    UseEffect React Hook中的空innerText

  23. 23

    可以使用带有react-hook-form和react-input-mask的reactstrap吗?

  24. 24

    如何使用react-hook-form在React中存储无线电组的状态

  25. 25

    尝试将react-hook-form与react-input掩码结合使用

  26. 26

    TypeError:寄存器不是在React中使用React Hook Form的函数

  27. 27

    Jest Testing React Form提交

  28. 28

    react-hook-form-控制器在第一次更改时未更新

  29. 29

    react-hook-form处理handleSubmit中的服务器端错误

热门标签

归档