菜鸟教程
教程 react tutorial

处理 input、textarea、checkbox、select

处理 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 中更新状态，实现单向数据流控制。

相关内容