ToDoList项目

Posted 饮尽杯中月

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ToDoList项目相关的知识，希望对你有一定的参考价值。

react hooks版本

父子传值

header组件与input组件的编写

openInput事件：Header子组件通知父组件App控制AddInput子组件

Header.js

import React from 'react';

import './index.scss';

function Header (props) 
  
  const  openInput  = props;

  return (
    <div className="header">
      <h1>事件待办</h1>
      <span className="icon" onClick=openInput>
        &#43;
      </span>
    </div>
  );


export default Header;

App.js

import React,  useState  from 'react';

import './App.scss';

import MyHeader from './components/Header';
functoin App() 
const [ isShowInput, setIsShowInput ] = useState(false)

return (
	<div className="App">
      <MyHeader openInput=() => setIsShowInput(!isShowInput) 		/>
	</div>
);


export default App;

AddInput.js

import React from 'react';

import './index.scss';

function AddInput (props) 
  const  isShow  = props,
  return (
    <>
      isShow && (
        <div className="input-wrapper">
          <input type="text"  placeholder="请输入待办事件" />
          <button className="btn btn-primary">
            增加
          </button>
        </div>
      )
    </>
  );


export default AddInput;

输入增加待办事项

usecallback
AddInput子组件将输入的数据传递给父组件App，App将数据存起来

import React,  useCallback, useRef  from 'react';

import './index.scss';

function AddInput (props) 
  const  isShow, addItem  = props,
        inputRef = useRef();

  const submitValue = useCallback(
    () => 
      const inputValue = inputRef.current.value.trim();
      if (inputValue.length === 0) 
        return;
      

      addItem(inputValue);
      inputRef.current.value = '';
    ,
    [addItem]
  );

  return (
    <>
      isShow && (
        <div className="input-wrapper">
          <input type="text" ref=inputRef placeholder="请输入待办事件" />
          <button className="btn btn-primary" onClick=submitValue>
            增加
          </button>
        </div>
      )
    </>
  );

App.js

import React,  useState, useEffect, useCallback  from 'react';

import './App.scss';

import MyHeader from './components/Header';
import AddInput from './components/AddInput';
import TodoItem from './components/TodoItem';

function App() 
  
  const [ isShowInput, setIsShowInput ] = useState(false),
        [ todoList, setTodoList ] = useState([])
        
  const addItem = useCallback(
    (value) => 
      const dataItem = 
        id: new Date().getTime(),
        content: value,
        completed: false,
      ;
      setTodoList((todoList) => [...todoList, dataItem]);
      setIsShowInput(false);
    ,
    []
  );

  return (
    <div className="App">
      <MyHeader openInput=() => setIsShowInput(!isShowInput) />
      <AddInput isShow=isShowInput addItem=(value) => addItem(value) />
      )
    </div>
  );


export default App;

遍历数据循环渲染ToDo列表

App将数据其传递给TODOItem子组件进行显示
App.js

import React,  useState, useEffect, useCallback  from 'react';

import './App.scss';

import MyHeader from './components/Header';
import AddInput from './components/AddInput';
import TodoItem from './components/TodoItem';

function App() 
  
  const [ isShowInput, setIsShowInput ] = useState(false),
        [ todoList, setTodoList ] = useState([])
  
  const addItem = useCallback(
    (value) => 
      const dataItem = 
        id: new Date().getTime(),
        content: value,
        completed: false,
      ;
      setTodoList((todoList) => [...todoList, dataItem]);
      setIsShowInput(false);
    ,
    []
  );

  return (
    <div className="App">
      <MyHeader openInput=() => setIsShowInput(!isShowInput) />
      <AddInput isShow=isShowInput addItem=(value) => addItem(value) />
        <ul className="todo-list">
          todoList.map((item, index) => 
            return (
              <TodoItem
                dataItem=item
                key=index
              />
            );
          )
        </ul>
      )
    </div>
  );


export default App;

TodoItem,js

import React from 'react';

import './index.scss';

function TodoItem (props) 
  const 
    dataItem,
   = props;

  return (
    <li className="todo-item">
      <div className="check-box">
        <input
          type="checkbox"
          checked=dataItem.completed
        />
      </div>
      <span
        className="content"
        style= textDecoration: dataItem.completed ? "line-through" : "none" 
      >
        dataItem.content
      </span>
      <div className="btn-group">
        <button
          className="btn btn-primary"
        >
          查看
        </button>
        <button
          className="btn btn-warning"
        >
          编辑
        </button>
        <button
          className="btn btn-danger"
        >
          删除
        </button>
      </div>
    </li>
  );


export default TodoItem;

数据存储到localStorage

useeffct用法
App.js

  useEffect(() => 
    const todoData = JSON.parse(localStorage.getItem("todoData") || '[]');
    setTodoList(todoData);
  , []);

  useEffect(() => 
    localStorage.setItem("todoData", JSON.stringify(todoList));
  , [todoList]);

模态框组件与插槽


基础容器Model的插槽中添加一定的内容，构成了CheckModel和EditModel组件。

Model.js

import React from 'react';

import '../../assets/css/common.scss';

function Modal (props) 
  const  isShowModal, modalTitle, children  = props;

  return (
    <>
      isShowModal ? (
        <div className="modal">
          <div className="inner">
            <div className="m-header">modalTitle</div>
            <div className="content-wrapper">children</div>
          </div>
        </div>
      ) : (
        ""
      )
    </>
  );


export default Modal;

CheckModal.js

import React from 'react';

import './index.scss';

import Modal from '../';
import  formatDateTime  from '../../../libs/utils';

function CheckModal (props) 
  const  isShowCheckModal, data, closeModal  = props;

  return (
    <Modal isShowModal=isShowCheckModal modalTitle="查看事件">
      <p className="topic">时间：formatDateTime(data.id)</p>
      <p className="topic">内容： data.content </p>
      <p className="topic">状态： data.completed ? '已完成' : '未完成' </p>
      <button 
        className="btn btn-primary comfirm-btn"
        onClick= closeModal 
      >确定</button>
    </Modal>
  );


export default CheckModal;

EditModal.js

import React,  useRef, useCallback  from 'react';

import './index.scss';

import Modal from '../';
import  formatDateTime  from '../../../libs/utils';

function EditModal (props) 
  const  isShowEditModal, data, submitEdit  = props,
        inputRef = useRef(),
        checkRef = useRef();
  
  const formatNewData = useCallback(() => 

    const inputLen = inputRef.current.value.trim().length;

    if (inputLen === 0) 
      inputRef.current.value = data.content;
      return;
    

    const newData = 
      id: new Date().getTime(),
      content: inputRef.current.value,
      completed: checkRef.current.checked,
    ;

    submitEdit(newData, data.id);
  , [submitEdit, data]);

  return (
    <Modal isShowModal=isShowEditModal modalTitle="编辑事件">
      <p className="topic">时间：formatDateTime(data.id)</p>
      <p className="topic">
        <textarea
          ref=inputRef
          defaultValue=data.content
          className="text-area"
        ></textarea>
      </p>
      <p className="topic">
        状态：
        <input
          type="checkbox"
          defaultChecked=data.completed ? true : false
          ref=checkRef
        />
      </p>
      <button className="btn btn-primary comfirm-btn" onClick=formatNewData>
        确定
      </button>
    </Modal>
  );


export default EditModal;

App.js

import React,  useState, useEffect, useCallback  from 'react';

import './App.scss';

import MyHeader from './components/Header';
import AddInput from './components/AddInput';
import NoDataTip from './components/NoDataTip';
import TodoItem from './components/TodoItem';
import CheckModal from './components/Modal/CheckModal';
import EditModal from './components/Modal/EditModal';

function App() 
  
  const [ isShowInput, setIsShowInput ] = useState(false),
        [ isShowCheckModal, setIsShowCheckModal ] = useState(false),
        [ isShowEditModal, setIsShowEditModal ] = useState(false),
        [ todoList, setTodoList ] = useState([]),
        [ currentData, setCurrentData ] = useState();

  useEffect(() => 
    const todoData = JSON.parse(localStorage.getItem("todoData") || '[]');
    setTodoList(todoData);
  , []);

  useEffect(() => 
    localStorage.setItem("todoData", JSON.stringify(todoList));
  , [todoList]);
  
  const addItem = useCallback(
    (value) => 
      const dataItem = 
        id: new Date().getTime(),
        content: value,
        completed: false,
      ;
      setTodoList((todoList) => [...todoList, dataItem]);
      setIsShowInput(false);
    ,
    []
  );

  const removeItem = useCallback((id) => 
    setTodoList((todoList) => todoList.filter((item) => item.id !== id));
  , []);

  const completeItem = useCallback((id) => 
    setTodoList((todoList) => todoList.map((item) => 
      if (item.id === id使用.NET 6开发TodoList应用——项目结构搭建


 Vuejs入门todolist项目解析


 使用Jquery实现todolist小项目


 ToDoList项目


 ToDoList项目


 ToDoList项目