react实现清空表单

使用受控组件重置表单

在React中，通过受控组件管理表单状态时，可以直接将表单字段的value绑定到组件的state，并通过更新state实现清空。

import React, { useState } from 'react';

function Form() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
  });

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Submitted:', formData);
    // 清空表单
    setFormData({ username: '', email: '' });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="username"
        value={formData.username}
        onChange={handleChange}
      />
      <input
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
      <button type="button" onClick={() => setFormData({ username: '', email: '' })}>
        Clear
      </button>
    </form>
  );
}

使用非受控组件与ref重置表单

对于非受控组件，可以通过ref直接访问DOM元素并调用reset()方法。

import React, { useRef } from 'react';

function Form() {
  const formRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(formRef.current);
    console.log('Submitted:', Object.fromEntries(formData));
    // 清空表单
    formRef.current.reset();
  };

  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      <input name="username" defaultValue="" />
      <input name="email" defaultValue="" />
      <button type="submit">Submit</button>
      <button type="button" onClick={() => formRef.current.reset()}>
        Clear
      </button>
    </form>
  );
}

使用第三方库（如Formik）

Formik等库提供内置的resetForm方法，适用于复杂表单场景。

import { useFormik } from 'formik';

function Form() {
  const formik = useFormik({
    initialValues: { username: '', email: '' },
    onSubmit: (values) => {
      console.log('Submitted:', values);
      formik.resetForm(); // 清空表单
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        name="username"
        value={formik.values.username}
        onChange={formik.handleChange}
      />
      <input
        name="email"
        value={formik.values.email}
        onChange={formik.handleChange}
      />
      <button type="submit">Submit</button>
      <button type="button" onClick={formik.resetForm}>
        Clear
      </button>
    </form>
  );
}

动态表单字段清空

若表单字段动态生成，需确保清空逻辑覆盖所有字段。

const initialValues = { field1: '', field2: '' };

function DynamicForm() {
  const [fields, setFields] = useState(initialValues);

  const clearForm = () => {
    setFields(initialValues); // 重置为初始值
  };

  return (
    <form>
      {Object.keys(fields).map((key) => (
        <input
          key={key}
          name={key}
          value={fields[key]}
          onChange={(e) => setFields({ ...fields, [key]: e.target.value })}
        />
      ))}
      <button type="button" onClick={clearForm}>
        Clear
      </button>
    </form>
  );
}