编辑“︁Next.js受控组件”︁（章节）

= Next.js受控组件 =

'''受控组件'''（Controlled Components）是React和Next.js中处理表单输入的一种核心模式。在这种模式下，表单数据由React组件的state管理，而非由DOM自身处理。这使得开发者能够更精确地控制用户输入，并实现复杂的表单逻辑。

== 基本概念 ==

在传统的HTML表单中，表单元素（如`<input>`、`<textarea>`、`<select>`）通常维护自身的状态，并通过DOM事件更新值。而在受控组件模式中：

* 表单元素的值由React的state或props直接控制
* 用户输入通过事件处理函数（如`onChange`）更新state
* 组件根据新的state重新渲染，更新表单显示

这种数据流可以用以下公式表示：
<math>UI = f(state)</math>

== 实现受控组件 ==

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

<syntaxhighlight lang="javascript">
import { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

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

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
    />
  );
}
</syntaxhighlight>

'''代码解析：'''
1. 使用`useState`钩子创建状态变量`value`
2. `input`的`value`属性绑定到该状态
3. 当用户输入时，`onChange`事件触发`handleChange`
4. `handleChange`用新值更新state，触发重新渲染

== 受控组件 vs 非受控组件 ==

{| class="wikitable"
|+ 受控与非受控组件对比
|-
! 特性 !! 受控组件 !! 非受控组件
|-
| 数据管理 || React state || DOM
|-
| 值来源 || `value`属性 || `defaultValue`属性
|-
| 更新控制 || 通过事件处理 || 直接DOM操作
|-
| 验证时机 || 每次state更新 || 表单提交时
|-
| 适用场景 || 复杂表单逻辑 || 简单表单/集成第三方库
|}

== 复杂表单处理 ==

对于包含多个输入的表单，可以使用单个state对象管理所有字段：

<syntaxhighlight lang="javascript">
function UserForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <form>
      <input
        name="username"
        value={formData.username}
        onChange={handleChange}
      />
      {/* 其他输入字段... */}
    </form>
  );
}
</syntaxhighlight>

== 实际应用案例 ==

'''案例：实时搜索过滤'''
受控组件特别适合实现实时搜索功能：

<syntaxhighlight lang="javascript">
function SearchList({ items }) {
  const [query, setQuery] = useState('');
  
  const filteredItems = items.filter(item =>
    item.name.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}
</syntaxhighlight>

'''工作流程：'''
1. 用户在输入框键入内容
2. `onChange`更新`query`状态
3. 组件重新渲染，计算过滤后的列表
4. 界面实时显示匹配结果

== 性能优化 ==

对于大型表单，频繁的重新渲染可能影响性能。可以考虑以下优化策略：

* 使用`useCallback`记忆化事件处理函数
* 对复杂计算使用`useMemo`
* 将独立表单字段拆分为单独组件

== 常见问题 ==

'''Q: 为什么我的输入无法编辑？'''
A: 这通常是因为你设置了`value`属性但没有提供`onChange`处理函数，或者处理函数没有正确更新state。

'''Q: 何时应该使用非受控组件？'''
A: 当需要集成非React代码、处理文件输入或性能关键型表单时，非受控组件可能更合适。

== 总结 ==

受控组件提供了对表单数据的完全控制，是构建可预测、可维护表单的首选方法。在Next.js应用中，结合服务端渲染和API路由，受控组件能够实现强大的表单处理逻辑，同时保持优秀的用户体验。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js表单处理]]