ReactFC 中form组件怎么重置表单

在 React 中，可以使用 form.reset() 方法来重置表单。但是在函数组件中，没有直接访问 DOM 元素的能力，所以需要使用 useRef 钩子来获取表单元素的引用。

以下是一个示例代码，展示了如何在函数组件中重置表单：

import React, { useRef } from 'react';

const FormComponent = () => {
  const formRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    // 处理表单数据
    // ...

    // 重置表单
    formRef.current.reset();
  };

  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      {/* 表单内容 */}
      <button type="submit">提交</button>
    </form>
  );
};

export default FormComponent;

在上述代码中，我们使用 useRef 钩子创建了一个名为 formRef 的引用。然后，将该引用传递给 <form> 元素的 ref 属性。

在 handleSubmit 函数中，我们首先调用 e.preventDefault() 方法来阻止表单的默认提交行为。接下来，处理表单数据。最后，通过 formRef.current.reset() 方法来重置表单。

这样，当用户点击提交按钮时，表单将被重置为初始状态