[react] 使用react寫一個todo應用，說說你的思路

拆分組件：應用 + 表單部分（input + button）、列表部分（checkbox + ul>li + 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.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>); }

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[react] 使用react写一个todo应用，说说你的思路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。