ReactJS - 非受控组件

你好，有抱负的程序员们！今天，我们将深入ReactJS的世界，探索一个名为“非受控组件”的概念。如果你是编程新手，不用担心——我会一步一步地引导你，就像我过去几年里帮助无数学生一样。所以，拿起你最喜欢的饮料，让我们一起踏上这段激动人心的旅程吧！

ReactJS - Uncontrolled Component

非受控组件是什么？

在我们深入了解细节之前，让我们先了解一下React中的非受控组件是什么。想象一下你在填写一张纸质表格——你写下你的信息，完成后，你提交它。这基本上就是React中非受控组件的工作方式！

在React中，非受控组件是一个表单元素，它内部管理自己的状态，而不是让React来控制它。这就好像给了表单元素一个自己的思维一样！

非受控组件中的表单编程

现在，让我们卷起袖子，亲自动手写一些代码。我们将从一个简单的例子开始，说明非受控组件在表单编程中是如何工作的。

基本非受控输入

以下是一个非受控输入的基本示例：

import React from 'react';

function SimpleForm() {
return (
<form>
<label htmlFor="name">姓名：</label>
<input type="text" id="name" name="name" />
</form>
);
}

export default SimpleForm;

在这个例子中，我们有一个带有文本输入框的简单表单。注意我们没有使用任何状态或onChange处理程序？这是因为输入框在内部管理自己的状态。

访问输入值

但是等等，你可能会问，“如果React不管理输入，我们如何获取输入的值？”这是个好问题！我们可以使用ref来直接访问DOM节点。让我们修改一下我们的例子：

import React, { useRef } from 'react';

function SimpleForm() {
const inputRef = useRef(null);

const handleSubmit = (event) => {
event.preventDefault();
alert('提交的姓名：' + inputRef.current.value);
};

return (
<form onSubmit={handleSubmit}>
<label htmlFor="name">姓名：</label>
<input type="text" id="name" name="name" ref={inputRef} />
<button type="submit">提交</button>
</form>
);
}

export default SimpleForm;

在这个更新的版本中，我们使用useRef钩子创建对输入的引用。当表单被提交时，我们可以使用inputRef.current.value访问输入的值。

创建一个简单表单

现在我们了解了基础知识，让我们使用非受控组件创建一个更全面的表单。

多输入表单

import React, { useRef } from 'react';

function ComplexForm() {
const nameRef = useRef(null);
const emailRef = useRef(null);
const messageRef = useRef(null);

const handleSubmit = (event) => {
event.preventDefault();
const formData = {
name: nameRef.current.value,
email: emailRef.current.value,
message: messageRef.current.value
};
console.log('表单数据：', formData);
// 在这里，你通常会发送数据到服务器
};

return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">姓名：</label>
<input type="text" id="name" name="name" ref={nameRef} required />
</div>
<div>
<label htmlFor="email">邮箱：</label>
<input type="email" id="email" name="email" ref={emailRef} required />
</div>
<div>
<label htmlFor="message">消息：</label>
<textarea id="message" name="message" ref={messageRef} required />
</div>
<button type="submit">发送消息</button>
</form>
);
}

export default ComplexForm;

在这个例子中，我们创建了一个包含三个字段：姓名、邮箱和消息的表单。每个字段都有自己的ref，这样我们就可以在表单提交时访问它们的值。

说明

我们为每个输入创建refs，使用useRef。
在handleSubmit函数中，我们阻止了表单的默认提交行为，并使用它们的refs收集每个输入的值。
然后我们将表单数据输出到控制台（在真实应用中，你会将数据发送到服务器）。

非受控组件的优缺点

让我们花点时间讨论使用非受控组件的优点和缺点：

优点	缺点
对于基本表单，代码更简单	对表单值控制较少
集成React和非React代码时很有用	实现动态表单验证更困难
对于非常大的表单，性能可能更好	不容易程序化重置表单值
与文件输入兼容良好	不太符合React风格——不遵循单一真实源的原则

何时使用非受控组件

非受控组件在某些场景下可能很有用：

当与非React代码或库集成时
对于不需要实时验证或动态更新的简单表单
当处理文件输入（它们本质上是非受控的）

然而，对于大多数React应用程序，受控组件（React管理表单状态）通常更受欢迎，因为它们提供了更多的控制，并且更符合React的设计理念。

结论

就这样，朋友们！我们一起穿越了React的非受控组件领域。记住，就像选择手动挡和自动挡汽车一样，选择受控组件还是非受控组件取决于你的具体需求。

在我们结束之前，我想起一个学生曾经告诉我，“React就像烹饪——有时你需要精确的计量，有时你可以凭感觉行事。”非受控组件有点像凭感觉行事——它们有它们的位置，但请明智地使用！

我希望这个指南为你照亮了非受控组件的道路。继续练习，继续编码，记住——在编程世界中，每个错误都是通往成功的垫脚石！

祝编码愉快，未来的React大师们！

Credits: Image by storyset