渐进式编程课
React 目录
第 20 课2026.09.28

允许用户暂时清空输入框，但不把空白标题写入课程列表。

第 20 课：提交前检查课程标题非空

  • 日期：2026-09-28
  • 课程序号：第 20 课
  • 知识点：表单 onSubmit 中校验未提交输入

用途或适用场景

允许用户暂时清空输入框，但不把空白标题写入课程列表。

核心概念

输入框局部 draft 只是未提交的交互状态；父组件的 lessons 仍是已保存标题的唯一事实源。提交时 trim()，仅非空时调用既有 onRename。

最小代码或操作示例

jsx
import { useState } from 'react';

function LessonItem({ item, onRename }) {
  const [draft, setDraft] = useState(item.title);
  function submit(event) {
    event.preventDefault();
    const title = draft.trim();
    if (!title) return;
    onRename(item.id, title);
    setDraft(title);
  }
  return <li><form onSubmit={submit}>
    <label>课程标题 <input value={draft}
      onChange={event => setDraft(event.target.value)} /></label>
    <button type="submit">保存</button>
  </form></li>;
}

// 第 19 课 LessonList 的 lessons、onRename、反转按钮和
// <LessonItem key={item.id} item={item} onRename={onRename} /> 保持不变。

3～5 分钟练习

清空 React 课程的输入框并保存；然后输入“React 入门”保存，再反转列表。

参考答案

空白提交不更新 lessons；“React 入门”保存到 id='l1'，反转后仍跟随该课程。

与上一课的联系

沿用第 19 课的 LessonItem、key={item.id}、父组件 onRename 和反转列表；本课只把逐字写入改为表单提交时校验，局部 draft 只承载未提交输入；下一课可给空白提交显示明确反馈。

时效校验

时效校验：2026-09-28（已核对 React 19.3 官方 <form> 与 <input> 文档；onSubmit、preventDefault 和受控输入用法未见废弃标记）。

官方参考