React 中的表单

几乎任何应用程序或网站都会以某种形式包含表单。无论是简单的用户登录、修改个人资料数据，还是搜索功能，表单都是开发过程中的核心构建块。如果您正在阅读本文，那么您很可能已经了解如何使用 HTML 构建表单。本文将演示在 React 应用程序中如何以不同的方式处理表单，以及如何构建表单使其在单页应用程序中正常运行。

为什么在 React 中有所不同？

通常，输入框和表单元素在网页上会维护各自的状态，这样你才能在其中输入内容，并且它们会维护脚本。React 需要访问页面上的所有状态，包括表单数据。因此，表单状态和应用程序状态必须是相同的。这就是 React 中构建表单处理方式的不同之处。

受控组件就是这样实现的。这是什么意思呢？就像 React 将表单渲染到页面上一样，它也控制着将用户输入渲染到表单上。这是通过将用户输入与表单组件的状态连接起来来实现的。

演示

从现在开始，我将引导您构建一个基本的狗狗表单组件，该组件接收姓名、年龄和品种等参数。我个人将使用函数式箭头组件和 React 内置的 useState 钩子来处理状态，而不是使用类组件。

好的，首先让我们创建我们的组件并确保引入 useState。

import React, { useState } from 'react';

const ReactForm = () => {


}

export default ReactForm;

接下来我们可以做的是在返回语句中使用标签、输入和提交来构建表单。

    return (
        <div>
            <form>
                <label htmlFor="name">Name:</label>
                <input type="text" name="name" />
                <label htmlFor="age">Age:</label>
                <input type="text" name="age" />
                <label htmlFor="name">Breed:</label>
                <input type="text" name="breed" />
                <input type="submit" value="submit" />
            </form>
        </div>
    )

现在看起来像一个非常标准的 HTML 表单，对吧？接下来，它开始有所不同，我们将开始将输入与组件的状态绑定。

我们需要状态来存储姓名、年龄和品种的输入值，以便应对这种情况。让我们在组件中使用 useState 钩子来设置它。

    const [ name, setName ] = useState("");
    const [ age, setAge ] = useState("");
    const [ breed, setBreed ] = useState("");

好了，现在我们在组件中有一个地方可以存储输入状态，然后我们就可以将输入的值与该状态变量关联起来了。对每个输入都执行此操作。它应该看起来像这样。

<input type="text" name="name" value={name}/>

现在，输入的值已与状态变量关联，并且状态变量为空字符串“”，您会注意到表单中的输入框已无法再输入内容。不妨试试。

这是个好兆头。这意味着你的输入与组件状态关联了。现在的问题是如何允许实际的用户输入。嗯，它与状态关联，所以我们必须改变状态，对吧？

让我们为此创建一个函数。

    const handleChange = ({ target }) => {
        switch(target.name){
            case "name":
                setName(target.value);
                break;
            case "age":
                setAge(target.value);
                break;
            case "breed":
                setBreed(target.value);
                break;
            default:
                return;
        }
    }

哇哇哇，这里面到底发生了什么？我们来分析一下

创建了一个 handleChange 函数。它接收一个事件作为参数。我选择从事件中解构出目标，因为我们要查看的是 event.target，而它又是与该函数关联的输入标签。
由于有多个输入，我设置了一个 switch 语句，它将考虑每种情况的目标名称值。
根据 target.name 的值，switch 语句将使用我们之前创建的钩子来改变值的状态。

现在已经创建了处理状态变化的函数，我们只需要通过为函数分配一个 onChange 将其与每个输入标签关联起来，如下所示：

<input type="text" name="name" value={name} onChange={handleChange}/>

瞧！现在更改处理程序已与输入关联，您应该能够成功地在输入框中输入内容了。这意味着什么呢？这意味着您通过在这些输入框中输入内容来改变组件的状态，更重要的是，输入状态和组件状态是相同的。

好的，那么我们还需要对表单做些什么呢？或许可以确保表单能够提交。为此，我们创建一个 handleSubmit 函数。我会让表单通过https://httpbin.org向虚拟后端发出 POST 请求。这是一个很棒的资源，可以用来测试请求，而无需实际发送请求。

    const handleSubmit = (event) => {
        event.preventDefault();
        let dog = {
            name,
            age,
            breed
        }

        fetch("https://httpbin.org/post", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(dog),
        })
          .then((response) => response.json())
          .then(console.log);
    }

让我们来看看这个。

创建一个 handleSubmit 函数，以事件作为参数。
首先，我们在事件中使用 preventDefault() ，因为表单提交时通常会做什么？刷新或重定向，而这并不是我们想在单页应用中做的事情。
创建了一个狗对象，我们可以将它的每个键值对分配给存储它们的状态变量。
向虚拟后端发出获取 POST 请求，并提交前面提到的带有我们的状态值的狗对象。
收到响应并将其转换为 JSON 后，它将被锁定到控制台。

好的，现在我们已经确定了提交的功能，让我们通过将函数分配给 onSubmit 来将其与表单关联起来，如下所示：

    <form onSubmit={handleSubmit}>

现在，当你填写输入并点击提交时，它会发出一个 POST 请求，然后发送一个响应，并将其记录到你的控制台。测试一下。

成功。您的表单已可以使用。

您可以做的最后一件事是，由于输入与状态相关（我提到过吗？），因此在提交时清除输入。

我处理这个问题的方法是创建一个超级简单的辅助函数：

   const clearForm = () => {
        setName("");
        setAge("");
        setBreed("");
    }

并在我的 handleSubmit 链中调用它：

          .then(clearForm())
          .then((response) => response.json())
          .then(console.log);

现在你应该有一个可控的表单组件，它允许提交表单，并且提交后表单会清空。怎么样？总之，今天就讲到这里，希望你有所收获。和往常一样，如果有任何问题或意见，欢迎随时联系我。祝你编程愉快！

文章来源：https://dev.to/eidorianavi/forms-in-react-4752