在 Web 开发中，表单是收集用户输入的关键。在 React 中，处理表单数据与传统的 HTML 有些不同。推荐的方法是使用一种称为“受控组件”（controlled components）的技术。
通过受控组件，表单数据由 React 组件的状态来处理。这使得 React 状态成为“单一事实来源”（single source of truth），让你能够以可预测的方式管理、验证和响应用户输入。
在本实验（lab）中，你将构建一个简单的表单，其中包含一个文本输入框和一个提交按钮。你将学习如何：
useState hook 来管理输入框的值。onChange 事件处理用户输入。onSubmit 事件处理表单提交。在本实验（lab）结束时，你将对 React 表单的基础知识有扎实的理解。
在本步骤中，你将开始创建表单的基本结构。这包括添加一个 form 元素和一个文本输入字段。我们还将添加 onChange 属性，这对于跟踪输入值变化至关重要。
首先，让我们准备好开发环境。我们需要安装项目依赖并启动开发服务器。
在 WebIDE 中打开终端，然后逐一运行以下命令。请确保你位于 ~/project/my-app 目录下。
cd my-app
npm install此命令会安装 package.json 中定义的所有必需包。
现在，启动开发服务器：
npm run dev -- --host 0.0.0.0 --port 8080接下来，在左侧文件浏览器中导航到 my-app/src 目录，并打开 App.jsx 文件。我们将修改此文件以添加我们的表单。
将 App.jsx 的内容替换为以下代码。我们在其中添加了一个 <form> 标签和一个 <input> 元素。输入框中添加了 onChange 属性，稍后将用于处理值变化。
import "./App.css";
function App() {
return (
<form>
<h1>React Form</h1>
<label>
Enter your name:
<input type="text" onChange={() => {}} />
</label>
</form>
);
}
export default App;保存文件后，切换到 LabEx 界面中的 Web 8080 标签页。你应该会看到一个带有文本输入字段的简单表单。如果未看到更改，请尝试刷新该标签页。此时，在输入字段中键入内容不会有任何反应，但我们已经搭建了基本结构。
在本步骤中，你将使输入字段具有交互性。为此，我们需要将输入字段的值存储在组件的状态中。我们将使用 useState hook 来创建一个状态变量和一个用于更新它的函数。
首先，我们需要从 'react' 库导入 useState hook。然后，我们将声明一个状态变量，我们称之为 name，用于保存输入的值。
接下来，我们将创建一个名为 handleChange 的函数。每当用户在输入字段中键入内容时，都会触发此函数。在此函数内部，我们将使用 useState 提供的 setName 函数，通过 event.target.value 访问输入框的当前值来更新我们的 name 状态。
使用以下代码更新你的 App.jsx 文件：
import { useState } from "react";
import "./App.css";
function App() {
// Create a state variable 'name' and a function 'setName' to update it
const [name, setName] = useState("");
// Define the event handler function
const handleChange = (event) => {
setName(event.target.value);
};
return (
<form>
<h1>React Form</h1>
<label>
Enter your name:
{/* Connect the handler to the onChange event */}
<input type="text" onChange={handleChange} />
</label>
</form>
);
}
export default App;现在，当你键入输入字段时，会调用 handleChange 函数，并且 name 状态会在每次按键时更新。虽然你还无法在屏幕上看到更改，但组件的状态现在正在跟踪输入的值。这是创建受控组件的第一半。
在本步骤中，我们将完成“受控组件”模式。受控组件是指其输入值由 React state 驱动的组件，使 state 成为“单一事实来源”。
为了实现这一点，我们需要将 <input> 元素的 value attribute 直接绑定到我们的 name 状态变量。这创建了一个双向数据绑定：
onChange，更新 state。value 被设置为新的 state 值。这确保了 UI 始终与组件的 state 同步。
修改 App.jsx 文件中的 <input> 元素以添加 value attribute，如下所示：
import { useState } from "react";
import "./App.css";
function App() {
const [name, setName] = useState("");
const handleChange = (event) => {
setName(event.target.value);
};
return (
<form>
<h1>React Form</h1>
<label>
Enter your name:
{/* Bind the input's value to the state */}
<input type="text" value={name} onChange={handleChange} />
</label>
</form>
);
}
export default App;保存文件后，返回 Web 8080 标签页。表单看起来会一样，但现在它是一个完全受控的组件。输入字段的显示现在直接由你的 React 组件中的 name 状态变量控制。
没有提交方式的表单是不完整的。在本步骤中，你将添加一个提交按钮和一个用于处理表单提交的事件 handler。
在 React 中处理表单提交的标准且最易于访问的方式是使用 <form> 元素本身的 onSubmit 事件。这确保了可以通过点击按钮或在输入字段中按“Enter”键来提交表单。
首先，让我们在表单内添加一个 type="submit" 的 <button>。然后，我们将创建一个新的 handler 函数 handleSubmit，并将其附加到 <form> 元素的 onSubmit attribute。
使用以下代码更新你的 App.jsx 文件：
import { useState } from "react";
import "./App.css";
function App() {
const [name, setName] = useState("");
const handleChange = (event) => {
setName(event.target.value);
};
// Create the submit handler function
const handleSubmit = (event) => {
// We will add more logic here in the next step
console.log("Form was submitted");
};
return (
// Attach the handler to the form's onSubmit event
<form onSubmit={handleSubmit}>
<h1>React Form</h1>
<label>
Enter your name:
<input type="text" value={name} onChange={handleChange} />
</label>
{/* Add a submit button */}
<button type="submit">Submit</button>
</form>
);
}
export default App;现在，如果你转到 Web 8080 标签页，你将看到一个“Submit”按钮。如果你点击它，你可能会注意到页面快速重新加载。这是表单提交的默认浏览器行为，我们将在最后一步中解决这个问题。
在最后一步中，你将完成表单的功能。正如你所注意到的，点击提交按钮会导致页面完全重新加载。在像 React 构建的单页应用程序 (SPA) 中，我们希望使用 JavaScript 处理表单提交，而无需重新加载页面。
要做到这一点，我们需要在 handleSubmit 函数中调用 event.preventDefault()。event 对象会自动传递给事件 handler，这个方法会阻止浏览器的默认行为。
一旦我们阻止了默认行为，我们就可以从 state 中访问提交的数据并对其进行处理，例如向用户显示一个警报。
让我们在 App.jsx 中更新 handleSubmit 函数来实现这个逻辑。
import { useState } from "react";
import "./App.css";
function App() {
const [name, setName] = useState("");
const handleChange = (event) => {
setName(event.target.value);
};
const handleSubmit = (event) => {
// Prevent the default form submission behavior
event.preventDefault();
// Show an alert with the submitted name
alert(`A name was submitted: ${name}`);
};
return (
<form onSubmit={handleSubmit}>
<h1>React Form</h1>
<label>
Enter your name:
<input type="text" value={name} onChange={handleChange} />
</label>
<button type="submit">Submit</button>
</form>
);
}
export default App;保存文件。现在，转到 Web 8080 标签页，在输入字段中输入一个名字，然后点击“Submit”按钮。你应该会看到一个弹出警报，显示你输入的名字，并且页面不会重新加载。
恭喜！你已成功在 React 中构建了一个基本的受控表单。
在本实验中，你学习了使用“受控组件”模式在 React 中处理表单的基本原理。
你已成功：
useState hook 在组件 state 中管理表单数据。onChange 事件 handler，以便在用户输入时更新 state，保持 UI 和 state 同步。onSubmit 事件 handler 处理表单提交，使用 event.preventDefault() 阻止了浏览器默认的页面重新加载。这些概念是你构建更复杂和交互式 React 应用程序表单的基础。现在你可以运用这些知识来构建包含多个输入、不同输入类型和验证逻辑的表单。
