如何避免在组件新增内容时，保留上一次填写的数据？

2023-11-01 03:36:00

如何在React中清空新增表单

在React中，当您创建新增组件时，您希望表单在用户点击新增按钮时是清空的，以便他们可以输入新数据。然而，默认情况下，React组件是状态驱动的，这意味着它们的数据存储在组件的状态中。因此，如果组件的状态包含上一次填写的数据，那么这些数据就会显示在表单中。

使用useState()和useRef()钩子

为了解决这个问题，我们可以使用React的useState()和useRef()钩子。useState()钩子允许我们创建和更新组件的状态，而useRef()钩子允许我们创建和引用组件中的元素。

使用useState()钩子

我们可以创建一个名为“formData”的状态变量，并将其初始化为空对象。然后，我们可以使用事件处理程序来更新“formData”状态变量，并在新增按钮被点击时将其重置为空对象。

import React, { useState } from "react";

const NewItemForm = () => {
  const [formData, setFormData] = useState({});

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

  const handleSubmit = (event) => {
    event.preventDefault();
    // 提交表单数据
    setFormData({});
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={formData.name} onChange={handleInputChange} />
      <input name="description" value={formData.description} onChange={handleInputChange} />
      <button type="submit">新增</button>
    </form>
  );
};

export default NewItemForm;

使用useRef()钩子

我们可以创建一个名为“formRef”的引用变量，并将其附加到表单元素上。然后，我们可以使用formRef.current.reset()方法来重置表单。

import React, { useRef } from "react";

const NewItemForm = () => {
  const formRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    // 提交表单数据
    formRef.current.reset();
  };

  return (
    <form onSubmit={handleSubmit} ref={formRef}>
      <input name="name" />
      <input name="description" />
      <button type="submit">新增</button>
    </form>
  );
};

export default NewItemForm;