首页 › JavaScript › React 教程

列表与表单

React 教程 · 第 6 章 · 7 次浏览

React 里列表和表单是高频场景。列表用 map 生成，表单用受控组件管理。

列表渲染

list.map(item => <Item key={item.id} data={item} />)。key 要用稳定唯一的值（id 而不是下标），帮助 React 高效更新。

删除与添加

用 filter 生成新数组删除，用展开运算符添加——React 状态不可变，要返回新数组/新对象。

多输入表单

多个输入框用一个 state 对象，onChange 里用 name 区分，统一更新。

代码示例

import { useState } from "react";

function TodoList() {
    const [todos, setTodos] = useState([
        { id: 1, text: "学习 React" },
        { id: 2, text: "写代码" }
    ]);
    const [input, setInput] = useState("");

    function add() {
        if (!input.trim()) return;
        setTodos([...todos, { id: Date.now(), text: input }]);
        setInput("");
    }

    function remove(id) {
        setTodos(todos.filter(t => t.id !== id));
    }

    return (
        <div>
            <ul>
                {todos.map(t => (
                    <li key={t.id}>
                        {t.text}
                        <button onClick={() => remove(t.id)}>删除</button>
                    </li>
                ))}
            </ul>
            <input value={input} onChange={e => setInput(e.target.value)} />
            <button onClick={add}>添加</button>
        </div>
    );
}
📚 JavaScript 语法速查
常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。
写法 / 语法作用
let x = 1;声明变量（可重新赋值）
const y = 2;声明常量（不可重新赋值）
var 已过时旧式变量声明，建议用 let/const
if (条件) { } else { }条件判断
for (let i = 0; i < n; i++) { }循环
while (条件) { }条件循环
function fn(a, b) { return a + b; }函数声明
const fn = (a) => a + 1;箭头函数
array.push(x) / pop()数组尾部添加 / 删除
array.map(fn) / filter(fn)数组映射 / 过滤
obj.key / obj["key"]访问对象属性
JSON.stringify(obj)对象转 JSON 字符串
JSON.parse(str)JSON 字符串转对象
document.getElementById("id")按 id 取元素
document.querySelector("选择器")按选择器取第一个元素
element.textContent读写元素文本
element.innerHTML读写元素 HTML（慎用，防 XSS）
element.addEventListener("click", fn)绑定事件
console.log(x)控制台输出（调试）
setTimeout(fn, 1000)延迟执行（毫秒）
window.location.href当前页面地址（可赋值跳转）
localStorage.setItem("k", v)本地存储写入
localStorage.getItem("k")本地存储读取
new Promise((resolve, reject) => {})Promise 异步处理
async / await异步函数语法糖
📖 延伸阅读