React 列表与表单

React 列表与表单

前置:React State 与事件

目标:map + key 渲染列表;表单提交增加待办。

动手

完整代码:react2/04-lists-forms/demo

bash 复制代码
cd react2/04-lists-forms/demo
npm install
npm run dev

要点

tsx 复制代码
{todos.map((todo) => (
  <li key={todo.id}>...</li>
))}
  • key 用稳定 id,不要用 index(列表会重排时尤其)。
  • 表单 onSubmit 里 preventDefault(),再 setTodos。

运行截图

下一篇

常用 Hooks

相关推荐
古茗前端团队18 小时前
由 key 引发的思考
前端·javascript·react.js
用户298698530144 天前
React 前端将 Excel 工作表导出为图片的技术实践
javascript·react.js·excel
終不似少年遊*5 天前
【安全业务Agent】从场景到编排
python·react.js·ai·langchain·agent·安全架构·工作流
JavaPub-rodert6 天前
从零搭建通用管理后台:ShiyuAdmin 的 Go、React 与 RBAC 实践
开发语言·react.js·golang
Highcharts.js6 天前
React 中原生支持使用 JSX 组件配置自定义表格 Highcharts Grid
前端·javascript·react.js·前端框架·jsx·highcharts·自定义表格
JudithHuang6 天前
React 嵌套路由与布局
前端·react.js·arcgis·react·react router
前端小D6 天前
React Native项目开发(iOS侧为例)
javascript·react native·react.js
志尊宝7 天前
AI原生前端开发(042):AI辅助的路由设计与优化
javascript·react.js·ai-native
znsoft8 天前
MaClaw(码卡龙)技术拆解:一个 Go + React 的可自进化智能体平台
开发语言·react.js·golang
濮水大叔8 天前
React/Next.js 生态里,有没有 CabloyJS 这样的全栈框架?
react.js·全栈·next.js