用react hooks构建一个todoList

时间  2019-11-07
标签 react hooks 构建 一个 todolist 栏目 React 繁體版
原文   原文链接

本文翻译来自于upmostly.com/tutorials/b…css

pc版本预览 html

image.png

构建一个简单的todoList用react和react hooks.这是一个很好的教程对于初学者和中级开发人员.react

我将带你走进如何用react构建简单的todo list,仅仅使用functional组件和新的useState react hooknpm

tips: useState hook 将使咱们可以存储状态的内部功能组件。👋Goodbye过于混乱 类组件,你好hook!🎣数组

建立一个新react项目

咱们将跳过全部手动构建配置过程，这样咱们可以快速进入正题浏览器

npx create-react-app todo-app
复制代码

而后咱们用ide开发todo-app文件夹bash

写html,css样式

image.png

当我建立一个新的react 组件,我喜欢首先编写的HTML和CSS。 咱们一般不会在内部类组件中添加render方法，相反,咱们直接返回HTML功能组件 替换app.js成下面的代码app

App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="app">
      <div className="header">
        <img src={logo} className="logo" alt="logo" />
      </div>
      <form className="todo-list">
        <ul>
          <div className="todo">
            <div className="checkbox" />
            <input type="text" value="Todo one" />
          </div>
        </ul>
      </form>
    </div>
  );
}

export default App;
复制代码

粘贴下面的CSS到 App.css里面，而后你也能够修改它，修改为你喜欢的样子。ide

App.css
body {
  background-color: #282c34;
  min-height: 100vh;
}

.app {
  padding-top: 10rem;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  animation: App-logo-spin infinite 20s linear;
  height: 20vmin;
  pointer-events: none;
}

.todo-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.todo {
  display: flex;
  align-items: center;
  margin: 1rem 0;
}

.todo-is-completed .checkbox {
  color: #000;
  background: #fff;
}

.todo-is-completed input {
  text-decoration: line-through;
}

.checkbox {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-right: 10px;
  cursor: pointer;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color .2s ease-in-out;
  border: 1px solid #fff;
}

.checkbox:hover {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0);
}

.checkbox-checked {
  color: #000;
  background: #fff;
}

ul {
  list-style: none;
  padding: 0;
  line-height: 2rem;
  width: 500px;
}

input {
  border: none;
  background: transparent;
  color: white;
  font-size: 1.4rem;
  outline: none;
  width: 100%;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
复制代码

用useState Hook添加State

如今,咱们有一个漂亮的todo应用,让咱们开始hook。svg

为何咱们须要State?

State容许咱们来跟踪变化在React组件中。一个todo列表常常变化。例如:

  • 添加新的待办事项   
  • 改变现有待办事项   
  • 删除待办事项   
  • 完成待办事项   
  • 没有完成待办事项 接下来在App.js文件的顶部 import useState hook
import React, { useState } from 'react';
复制代码

终于咱们能够初始化咱们组件的state属性,像下面这个样子

App.js
...

function App() {
  const [todos, setTodos] = useState([
    {
      content: 'Pickup dry cleaning',
      isCompleted: true,
    },
    {
      content: 'Get haircut',
      isCompleted: false,
    },
    {
      content: 'Build a todo app in React',
      isCompleted: false,
    }
  ]);
  
...
复制代码

tips: 记住,hook 必须初始化react 组件的内部。你不能在函数外部初始化它。

当你使用useState hook ,将会添加两个值:getter和setter。在上面的代码中，todos是state自己,setTodos 是更新state 值的方法。 咱们初始化todos设置一个默认对象，这个对象用一个数组填充。为何咱们使用对象而不是简单的字符串?由于咱们须要存储为每一个作两条信息:

  • 待办事项的内容
  • 待办事项是否已经完成

显示待办事项

保存项目而后跳转到你的应用程序在浏览器中运行的状况（执行npm start），你将看到一条todo item..🤔 这么奇怪。咱们有三个待办事件在咱们的State,为何咱们只看到一条。 咱们设置状态初始值,但尚未返回语句todo状态值 显示待办事项,咱们须要循环todos数组和呈现一个todo项数组里面的每一项行动计划。为此,咱们将使用map函数

...
<form className="todo-list">
  <ul>
    {todos.map((todo, i) => (
      <div className="todo">
        <div className="checkbox" />
        <input type="text" value={todo.content} />
      </div>
    ))}
  </ul>
</form>
...
复制代码

map是一个很常见的函数。你可能会遇到不少次,因此重要的是你须要了解它是如何工做的。 上面的代码是遍历todos数组而后渲染括号内HTML为数组中的每一项。 而后保存一下代码，你将看到。。。

image.png

新建一个新的待办事件

如今咱们可以显示待办事项列表,让咱们添加新建一个todo项的能力。 首先添加一个onKeyDown事件处理程序的输入字段：

...

<div className="todo">
  <div className="checkbox" />
  <input
    type="text"
    value={todo.content}
    onKeyDown={e => handleKeyDown(e, i)}
  />
</div>
...
复制代码

onKeyDown调用一个名为handleKeyDown的函数。经过输入的名称以及待办事项的索引。handleKeyDown里面,咱们发现若是返回键被按下。若是是,咱们称之为createTodoAtIndex。让咱们添加这两个函数在返回语句,以下所示：

...

function handleKeyDown(e, i) {
  if (e.key === 'Enter') {
    createTodoAtIndex(e, i);
  }
}

function createTodoAtIndex(e, i) {
  const newTodos = [...todos];
  newTodos.splice(i + 1, 0, {
    content: '',
    isCompleted: false,
  });
  setTodos(newTodos);
  setTimeout(() => {
    document.forms[0].elements[i + 1].focus();
  }, 0);
}
...
复制代码

createTodoAtIndex函数看起来很复杂,但实际上很是简单。让我将其分解:

  • 咱们经过监听返回键被按下而后检查event.key的值
  • 接下来,咱们建立一个副本todos状态数组。咱们这样作是由于state不该该直接修改
  • 使用复制出来的待办事件,咱们插入一个新的空待办事项后当前选中待办事项。这就是为何咱们须要在当前todo 的index传递给这个函数
  • 插入新的todos副本后,咱们更新原始数组的副本
  • 最后,咱们将focus到Input中

您可能已经注意到,代码行focus到Input中超时触发后0毫秒 更新内部状态的组件不发生瞬间反应。有时候须要时间,尤为是咱们更新包含大量的数据。 所以咱们添加一个延时去等待state完成更新以后focusing on新渲染的input。 [站外图片上传中...(image-7255ee-1561032624160)]

更新一个待办事项

如今咱们能够建立一个新的任务,让咱们添加一个实际上填入的值。 文本框有一个onChange事件该字段的值改变时触发。 当心,虽然input values自己并不提供更新绑定函数，相反,一个event对象容许您经过event.target.value找到更新后的values 在createTodoAtIndex方法以后 添加如下方法

...

function updateTodoAtIndex(e, i) {
  const newTodos = [...todos];
  newTodos[i].content = e.target.value;
  setTodos(newTodos);
}

...
复制代码

很像createTodoAtIndex方法，updateTodoAtIndex两个参数：输入event和待办事项index,一样的,咱们复制todos数组来避免直接state. 在这个复制出来的数组中，咱们给todos添加content key,内容是event 中的values值。最后,咱们用复制出来的数组更新todos的state [站外图片上传中...(image-2065b1-1561032624160)]

删除todos

下面咱们来实现，todos values内容为空以后输入退格键，删除这个todos的功能。 咱们称之为一个叫作removeTodoAtIndex新功能

function handleKeyDown(e, i) {
  if (e.key === 'Enter') {
    createTodoAtIndex(e, i);
  }
  if (e.key === 'Backspace' && todos[i].content === '') {
    e.preventDefault();
    return removeTodoAtIndex(i);
  }
}

function removeTodoAtIndex(i) {
  if (i === 0 && todos.length === 1) return;
  setTodos(todos => todos.slice(0, i).concat(todos.slice(i + 1, todos.length)));
  setTimeout(() => {
    document.forms[0].elements[i - 1].focus();
  }, 0);
}
复制代码

保存组件并返回到您的浏览器您就能够本身试一下具体的功能

完善todos

咱们讨论了建立、更新和删除一个todo。如今让咱们来完善它。 如今,我给圆圈添加了hover效果，不过点击并无任何效果。 让咱们改变它 添加一个onClick绑定事件以及todo-is-completed样式名

...

<div className={`todo ${todo.isCompleted && 'todo-is-completed'}`}>
  <div className={'checkbox'} onClick={() => toggleTodoCompleteAtIndex(i)}>
    {todo.isCompleted && (
      <span>&#x2714;</span>
    )}
  </div>
  <input
    type="text"
    value={todo.content}
    onKeyDown={e => handleKeyDown(e, i)}
    onChange={e => updateTodoAtIndex(e, i)}
  />
</div>

...
复制代码

最后,添加toggleTodoCompletedAtIndex函数

function toggleTodoCompleteAtIndex(index) {
  const temporaryTodos = [...todos];
  temporaryTodos[index].isCompleted = !temporaryTodos[index].isCompleted;
  setTodos(temporaryTodos);
}
复制代码

保存以后，让咱们看下最后的成果吧！ [站外图片上传中...(image-93efad-1561032624160)]

完成的源码

下面我提供了完整的源代码,这样你就能够看到咱们的反应todo组件在其全部的使用方式。

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [todos, setTodos] = useState([
    {
      content: 'Pickup dry cleaning',
      isCompleted: true,
    },
    {
      content: 'Get haircut',
      isCompleted: false,
    },
    {
      content: 'Build a todo app in React',
      isCompleted: false,
    }
  ]);

  function handleKeyDown(e, i) {
    if (e.key === 'Enter') {
      createTodoAtIndex(e, i);
    }
    if (e.key === 'Backspace' && todos[i].content === '') {
      e.preventDefault();
      return removeTodoAtIndex(i);
    }
  }

  function createTodoAtIndex(e, i) {
    const newTodos = [...todos];
    newTodos.splice(i + 1, 0, {
      content: '',
      isCompleted: false,
    });
    setTodos(newTodos);
    setTimeout(() => {
      document.forms[0].elements[i + 1].focus();
    }, 0);
  }

  function updateTodoAtIndex(e, i) {
    const newTodos = [...todos];
    newTodos[i].content = e.target.value;
    setTodos(newTodos);
  }

  function removeTodoAtIndex(i) {
    if (i === 0 && todos.length === 1) return;
    setTodos(todos => todos.slice(0, i).concat(todos.slice(i + 1, todos.length)));
    setTimeout(() => {
      document.forms[0].elements[i - 1].focus();
    }, 0);
  }

  function toggleTodoCompleteAtIndex(index) {
    const temporaryTodos = [...todos];
    temporaryTodos[index].isCompleted = !temporaryTodos[index].isCompleted;
    setTodos(temporaryTodos);
  }

  return (
    <div className="app">
      <div className="header">
        <img src={logo} className="logo" alt="logo" />
      </div>
      <form className="todo-list">
        <ul>
          {todos.map((todo, i) => (
            <div className={`todo ${todo.isCompleted && 'todo-is-completed'}`}>
              <div className={'checkbox'} onClick={() => toggleTodoCompleteAtIndex(i)}>
                {todo.isCompleted && (
                  <span>&#x2714;</span>
                )}
              </div>
              <input
                type="text"
                value={todo.content}
                onKeyDown={e => handleKeyDown(e, i)}
                onChange={e => updateTodoAtIndex(e, i)}
              />
            </div>
          ))}
        </ul>
      </form>
    </div>
  );
}

export default App;
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程