# 处理 input、textarea、checkbox、select

URL: https://caijiao.org/react/chapter6/form-elements
Source: docs/react/chapter6/form-elements.md
Description: React 提供了统一的方式来处理表单控件，包括 input、textarea、checkbox 和 select，通过绑定 value 和 onChange 实现数据与 UI 的同步。

## 处理 input 文本框

文本框是最常见的受控组件之一，使用 `value` 和 `onChange` 实现状态绑定。

```jsx
import { useState } from 'react';

function TextInput() {
  const [text, setText] = useState('');
  return (
    <input
      type="text"
      value={text}
      onChange={(e) => setText(e.target.value)}
    />
  );
}
````

## 处理 textarea

`textarea` 和 `input` 类似，也通过 `value` 绑定内容。

```jsx
function TextAreaExample() {
  const [content, setContent] = useState('');
  return (
    <textarea
      value={content}
      onChange={(e) => setContent(e.target.value)}
    />
  );
}
```

## 处理 checkbox

`checkbox` 使用 `checked` 属性控制状态。

```jsx
function CheckboxExample() {
  const [checked, setChecked] = useState(false);
  return (
    <label>
      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
      />
      同意条款
    </label>
  );
}
```

## 处理 select 下拉框

`select` 通过 `value` 和 `onChange` 控制选中的选项。

```jsx
function SelectExample() {
  const [option, setOption] = useState('apple');
  return (
    <select value={option} onChange={(e) => setOption(e.target.value)}>
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
      <option value="orange">橘子</option>
    </select>
  );
}
```

## 总结

React 中处理各种表单控件的核心在于通过 `value` 或 `checked` 属性绑定组件状态，并在 `onChange` 中更新状态，实现单向数据流控制。