渐进式编程课
React 目录
第 19 课2026.09.24

编辑课程标题后即使反转列表，输入值仍与对应课程数据一致。

第 19 课：受控编辑列表项标题

  • 日期：2026-09-24
  • 课程序号：第 19 课
  • 知识点：列表项输入值由父状态控制

用途或适用场景

编辑课程标题后即使反转列表，输入值仍与对应课程数据一致。

核心概念

把上一课的 defaultValue 改为 value；onChange 把新标题传回持有 lessons 的父组件，不复制另一份业务状态。

最小代码或操作示例

jsx
import { useState } from 'react';

function LessonItem({ item, onRename }) {
  return <li><input value={item.title}
    onChange={event => onRename(item.id, event.target.value)} /></li>;
}

export default function LessonList() {
  const [lessons, setLessons] = useState([
    { id: 'l1', title: 'React' }, { id: 'l2', title: 'Vue' }
  ]);
  const onRename = (id, title) => setLessons(items =>
    items.map(item => item.id === id ? { ...item, title } : item)
  );
  return <>
    <button onClick={() => setLessons(items => [...items].reverse())}>反转顺序</button>
    <ul>{lessons.map(item =>
      <LessonItem key={item.id} item={item} onRename={onRename} />
    )}</ul>
  </>;
}

3～5 分钟练习

把 React 改为 React 入门，再反转列表。

参考答案

标题跟随 id='l1' 的课程移动；lessons 是唯一标题状态源。

与上一课的联系

沿用第 18 课的 LessonItem、稳定 key 和反转按钮；本课只把输入框改为 value/onChange 受控编辑，复用此前按 ID 更新数组的方法；完成后下一课可在提交时检查标题非空。

时效校验

时效校验：2026-09-24（React 官方 input 与列表渲染参考；受控 value/onChange、稳定 key 未见废弃标记）。

官方参考