React中的受控表单（附代码）

我的编码训练营第二阶段即将结束。在第一阶段学习了JavaScript之后，这个阶段教我们使用React框架。我很喜欢React的组织性，它允许你写看起来像HTML的代码。我发现它对用户更友好，尽管要理解它的一些工作方式有点困难。对我来说，最棘手的事情之一是如何设置受控表单，所以我决定这将是我下一篇博客的最佳主题

我对受控表单的好处的理解是，我们可以更好地控制用户输入的数据，因为当用户在表单上输入数据时，它可以通过State Hook实时更新。每次状态变量发生变化时，该组件都会重新显示，而不是手动刷新页面。如果需要，其他组件或元素可以使用状态值，如果你需要在表单输入提交后在页面上呈现，这很有帮助。

要设置一个受控表单，需要一个状态变量，以及一个在表单输入变化时更新状态的函数。

在设置状态之前，一定要导入状态钩子。请参考React状态钩子页面，了解更多关于状态的信息：

import React, { useState } from "react";

对于受控表单，状态变量通常用于将默认输入值设置为空字符串，以反映在用户在表单上输入任何东西之前的空字段：

const [inputValue, setInputValue] = useState(“”);

接下来，设置一个函数，当表单输入发生变化时更新状态变量。最好的做法是在最初设置时让它在控制台记录事件目标值，这样你就可以在设置更新状态变量的函数之前确认它正在捕获表单输入：

function handleInputValueChange(event) {
  console.log(event.target.value);
}

在输入元素上添加一个onChange事件监听器，在大括号内调用该函数：

<input
   type="text"
   name="title"
   placeholder="Title"
   onChange={handleInputValueChange}
/>

如果工作正常，控制台日志应该显示表单中输入的所有内容，因为它正在被输入：

现在它捕捉到了输入值，我们可以让它更新状态变量。我们需要把它改成setState，而不是控制台日志。在下面的例子中，它将把InputValue设置为事件的目标值。如果你让它在函数之外的控制台记录状态变量，你可以确认当用户在表单的输入框中输入东西时，状态变量正在被更新。

function handleInputChange(event) {
  setInputValue(event.target.value);
}

console.log(inputValue)

这就是了!现在我们有了一个控制表单的基本设置。如果有一个以上的输入字段，可以对每个输入字段都这样做。它也可以用在其他表单元素上，比如选择。当你为提交事件设置一个函数时，你可以让它把状态变量设置为一个空字符串，以便在用户点击提交按钮后清除他们在字段中的输入。