[react] 使用react写一个todo应用，说说你的思路

1. 拆分组件：应用 + 表单部分（input + button）、列表部分（checkbox + ul>li + delete button）
2. 数据设计：表单的待输入字段 + 列表中的List数据（List item中有content isCompleted）
3. 数据存放：所有的数据都存放到“应用”组件，事件和子数据都通过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.Fragment><input 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)}><inputtype="checkbox"checked={e.isCompleted}onChange={() => onChange(e.id)}/><span>{e.text}</span><button onClick={() => onDel(e.id)}>删除</button></li>);})}</ul>);
};export default function App() {const [todoList, { add, del, toggleStatus }] = useTodoList([{ text: 'text', id: 123, isCompleted: false }]);return (<div><Form onAdd={add} /><TodoList list={todoList} onChange={toggleStatus} onDel={del} /></div>);
}

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题