Form Inputs 表单输入控件
最后更新：2026-10-28
Form Inputs 表单输入控件
text、checkbox、select、textarea 都走「value/checked + onChange」一套逻辑，但取值不同：文本读 e.target.value，勾选读 e.target.checked。掌握差异即够用。
| 分组 | 组件模式 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
<input value={text} onChange={e => setText(e.target.value)} />
<input type="checkbox" checked={ok} onChange={e => setOk(e.target.checked)} />
<select value={city} onChange={e => setCity(e.target.value)}>…</select>返回值：无返回值，作为编码模式使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
三个控件分别演示文本、勾选、下拉的受控写法，底部一行实时汇总当前所有表单值。💡 要点
💡 提示 checkbox / radio 读 e.target.checked 而不是 value，这是新手最常踩的取值错误。
ℹ️ 说明 React 里 textarea 用 value 属性控制内容，而不是像 HTML 那样写子文本。
⚠️ 注意 多选 select 需要加 multiple，并在 onChange 里遍历 e.target.selectedOptions 收集值。
🏷️ 组件模式相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q checkbox 为什么读 checked 而不是 value？
A 勾选框的用户输入是「选中与否」这一布尔状态，对应 DOM 属性 checked；value 只是它的附带值。
Q textarea 在 React 里怎么写？
A 和 input 一样用 value + onChange：value={text}，不使用 HTML 的子文本写法。
Q 多选下拉怎么取值？
A 给 select 加 multiple，onChange 里用 Array.from(e.target.selectedOptions, o => o.value) 收集数组。
