本文翻译来自于upmostly.com/tutorials/b…
pc版本预览
构建一个简单的todoList用react和react hooks.这是一个很好的教程对于初学者和中级开发人员.
我将带你走进如何用react构建简单的todo list,仅仅使用functional组件和新的useState react hook
tips: useState hook 将使我们能够存储状态的内部功能组件。?Goodbye过于混乱 类组件,你好hook!?
创建一个新react项目
我们将跳过所有手动构建配置过程,这样我们能够快速进入正题
npx create-react-app todo-app
复制代码
然后我们用ide开发todo-app文件夹
写html,css样式
当我创建一个新的react 组件,我喜欢首先编写的HTML和CSS。 我们通常不会在内部类组件中添加render方法,相反,我们直接返回HTML功能组件 替换app.js成下面的代码
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里面,然后你也可以修改它,修改成你喜欢的样子。
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。
为什么我们需要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为数组中的每一项。 然后保存一下代码,你将看到。。。
新建一个新的待办事件
现在我们能够显示待办事项列表,让我们添加新建一个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>✔</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>✔</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;
复制代码