React.FC 中如何重置表单内容 - 详细指南

在使用 React.FC 组件时，您可能需要重置表单内容。这可以通过使用 React 的 useState 钩子来实现。首先，创建一个状态变量来保存表单的初始值。然后，创建一个处理函数来重置表单，将表单的值设置为初始值。最后，在表单的重置按钮上调用该处理函数。\n\n下面是一个示例代码：\n\njsx\nimport React, { useState } from "react";\n\nconst MyForm: React.FC = () => {\n const initialValues = {\n name: "",\n email: "",\n message: ""\n };\n\n const [formValues, setFormValues] = useState(initialValues);\n\n const handleResetForm = () => {\n setFormValues(initialValues);\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n const { name, value } = event.target;\n setFormValues(prevState => ({\n ...prevState,\n [name]: value\n }));\n };\n\n const handleSubmit = (event: React.FormEvent) => {\n event.preventDefault();\n // 处理表单提交逻辑\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <label>\n Name:\n <input\n type="text"\n name="name"\n value={formValues.name}\n onChange={handleChange}\n />\n </label>\n <br />\n <label>\n Email:\n <input\n type="email"\n name="email"\n value={formValues.email}\n onChange={handleChange}\n />\n </label>\n <br />\n <label>\n Message:\n <textarea\n name="message"\n value={formValues.message}\n onChange={handleChange}\n />\n </label>\n <br />\n <button type="submit">Submit</button>\n <button type="button" onClick={handleResetForm}>Reset</button>\n </form>\n );\n};\n\nexport default MyForm;\n\n\n在上面的示例中，我们使用了 useState 钩子来创建了一个名为 formValues 的状态变量，它保存了表单的当前值。在 handleResetForm 函数中，我们将该状态变量设置为初始值 initialValues，从而实现了表单的重置功能。在表单的重置按钮上，通过 onClick 事件处理程序调用 handleResetForm 函数来触发重置操作。