C08

学习计划表

手机上可以运行，但建议在电脑上完成代码练习。

编辑器加载中…

预览

点击「运行」在隔离沙箱中预览

任务说明

React 沙箱

实现学习计划表单：课程名称与每周时长（1-40）两个输入框，提交后追加到计划列表。需要校验输入并在字段旁显示错误、提交进行中阻止重复提交、保存失败时保留已填内容并提示。保存函数通过 prop 注入：App({ savePlan })，savePlan 接收 { name, hours } 返回 Promise<{ ok: boolean }>，默认实现约 30ms 后返回 { ok: true }。

要求

空表单点「提交」：显示「请输入课程名称」与「时长需在 1-40 之间」，不新增计划
填入名称与合法时长后提交成功：列表出现「课程名 · 每周 N 小时」，输入框清空
注入返回 { ok: false } 的 savePlan 时：显示「保存失败，请重试」，「正在填写：」一行仍显示已填内容
注入 250ms 才返回的 savePlan 时：点击提交后按钮变为「提交中…」，期间再次点击不会产生两条计划

R16 表单校验与提交

分层提示

先自己试，再逐层展开。

参考答案

卡住时再看；查看操作会记录下来用于复盘。测试版本 1.0.0

学习计划表

Command Palette

学习计划表