ReactJS - 受控组件：初学者指南

你好，未来的React开发者们！今天，我们将踏上一段令人兴奋的旅程，探索ReactJS中的受控组件世界。如果你是编程新手，不用担心——我会成为你的友好向导，我们会一步一步地学习。在本教程结束时，你将能够像专业人士一样创建表单！

ReactJS - Controlled Component

受控组件是什么？

在我们深入之前，让我们从一个简单的类比开始。想象你在一个高级餐厅，你想点一份定制披萨。在这个场景中，你（React组件）控制着披萨上放什么（表单数据）。每次你想添加或删除配料时，你都会告诉服务员（状态），然后他们相应地更新你的订单。这基本上就是React中受控组件的工作方式！

在React术语中，受控组件是指其值由React控制的输入表单元素。而不是由DOM处理表单数据，React来接管。

为什么使用受控组件？

单一真相来源：所有表单数据都存储在组件状态中。
即时访问输入：你可以立即访问输入值。
更多控制：你可以轻松地操作和验证输入数据。

现在，让我们动手写一些代码！

带有单个输入的受控组件

让我们从一个简单的例子开始——一个向用户问好的文本输入字段。

import React, { useState } from 'react';

function GreetingInput() {
const [name, setName] = useState('');

const handleChange = (event) => {
setName(event.target.value);
};

return (
<div>
<input type="text" value={name} onChange={handleChange} />
<p>你好，{name}！</p>
</div>
);
}

export default GreetingInput;

让我们分解一下：

我们从React中导入useState来管理组件的状态。
我们创建了一个状态变量name及其设置函数setName。
handleChange函数在输入变化时更新name状态。
在JSX中，我们将输入的value设置为name并将onChange事件绑定到handleChange。
我们使用name的当前值显示问候。

这就是受控组件的本质——React通过状态控制输入的值。

自己试试！

在输入字段中输入你的名字。注意问候是如何即时更新的？这就是受控组件的魔力！

创建一个简单表单

现在我们已经掌握了基础知识，让我们创建一个带有多个输入的更复杂的表单。

import React, { useState } from 'react';

function PizzaOrderForm() {
const [order, setOrder] = useState({
name: '',
size: 'medium',
toppings: []
});

const handleChange = (event) => {
const { name, value, type, checked } = event.target;

if (type === 'checkbox') {
if (checked) {
setOrder(prevOrder => ({
...prevOrder,
toppings: [...prevOrder.toppings, value]
}));
} else {
setOrder(prevOrder => ({
...prevOrder,
toppings: prevOrder.toppings.filter(topping => topping !== value)
}));
}
} else {
setOrder(prevOrder => ({
...prevOrder,
[name]: value
}));
}
};

const handleSubmit = (event) => {
event.preventDefault();
alert(`订单已下！姓名：${order.name}，大小：${order.size}，配料：${order.toppings.join(', ')}`);
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={order.name}
onChange={handleChange}
placeholder="你的名字"
/>
<select name="size" value={order.size} onChange={handleChange}>
<option value="small">小份</option>
<option value="medium">中份</option>
<option value="large">大份</option>
</select>
<label>
<input
type="checkbox"
name="toppings"
value="cheese"
checked={order.toppings.includes('cheese')}
onChange={handleChange}
/>
芝士
</label>
<label>
<input
type="checkbox"
name="toppings"
value="pepperoni"
checked={order.toppings.includes('pepperoni')}
onChange={handleChange}
/>
意式香肠
</label>
<button type="submit">下单</button>
</form>
);
}

export default PizzaOrderForm;

哇，这么多代码！但别担心，我们会一步一步分解：

我们创建了一个状态对象order来保存所有表单数据。
handleChange函数现在更复杂了。它处理不同类型的输入：

对于文本和选择输入，它更新状态中对应的属性。
对于复选框，它将配料添加到数组或从数组中移除。

我们有一个handleSubmit函数，它阻止了表单的默认提交行为，并显示一个包含订单详细信息的警告框。
在JSX中，我们创建了用于姓名、大小（作为选择框）和配料（作为复选框）的输入。
每个输入的值（或复选框的选中状态）都由order状态控制。

受控表单的力量

有了这个设置，你可以完全控制你的表单数据。想要添加验证？很简单！只需修改handleChange函数。需要在提交前转换数据？只需更新handleSubmit函数。可能性无穷无尽！

受控组件的常见方法

让我们总结一下受控组件中常用的方法：

方法	描述
`useState`	用于管理组件状态的钩子
`onChange`	输入变化的事件处理程序
`onSubmit`	表单提交的事件处理程序
`preventDefault`	阻止默认表单提交行为
`event.target.value`	获取输入的当前值
`event.target.checked`	获取复选框的选中状态

结论

恭喜你！你刚刚学习了React中的受控组件。我们涵盖了单个输入、复杂表单，甚至创建了一个披萨订单表单（想到这个我就饿了！）。

记住，受控组件让你能够精确地管理表单数据。一开始可能看起来工作量更大，但你获得的控制和灵活性是值得的。

在你继续React之旅时，你会找到无数使用受控组件的方法。也许你会创建一个博客文章编辑器，一个用户注册表单，或者甚至是一个披萨配送应用（如果你真的创建了，请给我发一个优惠码！）。

继续练习，保持好奇心，快乐编码！

Credits: Image by storyset