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

Posted 2021-12-19 前端小歌谣

[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);
  // 增加Todo
  const add = text => 
    id.current++;
    setList(
      list.concat(
        id: id.current,
        text,
        isCompleted: false
      )
    );
  ;
  // 删除Todo
  const 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)>
            <input
              type="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>
  );

个人简介

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

主目录

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