时间戳

首页 > 解决方案 > react-hook-form - 每次提交后为空输入字段

reactjs - 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，我不知道该怎么做。

标签： reactjsreact-hooks

解决方案

const InputForm = () => {
  const { register, handleSubmit, reset } = useForm();

  const onSubmit = (data) => {
    //...
    reset();
  };

将其添加到提交功能

推荐阅读