网站建设绪论,seo实战优化,宝安做网站信科,企业网站备案后可否更改名称[react] 使用react写一个todo应用#xff0c;说说你的思路
拆分组件#xff1a;应用 表单部分#xff08;input button#xff09;、列表部分#xff08;checkbox ulli delete button#xff09;数据设计#xff1a;表单的待输入字段 列表中的List数据#x…[react] 使用react写一个todo应用说说你的思路
拆分组件应用 表单部分input button、列表部分checkbox ulli delete button数据设计表单的待输入字段 列表中的List数据List item中有content isCompleted数据存放所有的数据都存放到“应用”组件事件和子数据都通过props往下传递 下面是简单的实现
import React, { useState, useRef } from react;function useTodoList(initialList) {const id useRef(0);const [list, setList] useState(initialList);// 增加Todoconst add text {id.current;setList(list.concat({id: id.current,text,isCompleted: false}));};// 删除Todoconst del id {setList(list.filter(e {return e.id ! id;}));};// 设置已完成const toggleStatus id {setList(list.map(e {if (e.id id) {return {...e,isCompleted: !e.isCompleted};} else {return { ...e };}}));};return [list,{add,del,toggleStatus}];
}const Form ({ onAdd }) {const [value, setValue] useState();const onChange event {const value event.target.value;setValue(value);};const onSubmit () {onAdd(value);setValue();};return (React.Fragmentinput value{value} onChange{onChange} /button onClick{onSubmit}提交/button/React.Fragment);
};const TodoList ({ list, onChange, onDel }) {const setItemStyle isCompleted {return isCompleted ? { text-decoration: line-through } : {};};return (ul{list.map(e {return (li key{e.id} style{setItemStyle(e.isCompleted)}inputtypecheckboxchecked{e.isCompleted}onChange{() onChange(e.id)}/span{e.text}/spanbutton onClick{() onDel(e.id)}删除/button/li);})}/ul);
};export default function App() {const [todoList, { add, del, toggleStatus }] useTodoList([{ text: text, id: 123, isCompleted: false }]);return (divForm onAdd{add} /TodoList list{todoList} onChange{toggleStatus} onDel{del} //div);
} 个人简介
我是歌谣欢迎和大家一起交流前后端知识。放弃很容易 但坚持一定很酷。欢迎大家一起讨论 主目录
与歌谣一起通关前端面试题
