摘要：構建事項列表待辦事項清單是使用廣泛的例子，理由很充分它們是很棒的練習工具。對表單使用我們的表單應該跟蹤的值并在保存提交時執行方法。記得敲哦對事項列表使用我們的事項列表也需要。在中傳遞這個函數我們使用方法把所有不符合的事項保存下來。

原文地址：How to Build a Todo List with React Hooks

React v16.7.0-alpha 引入了鉤子(Hooks)。開心！

鉤子是能讓你在沒有用es6類的情況下使用React的狀態, 生命周期鉤子這些特性的功能。

優勢：

隔離狀態相關邏輯，使測試更加容易

不需要使用渲染屬性或者高階組件就可以共享狀態相關邏輯

根據邏輯而不是生命周期鉤子來分離應用程序的關注點

避免ES6類，因為它們很奇怪，不是真正的類，甚至會誤導有經驗的JavaScript開發人員

查看更多：React’s official Hooks intro

寫這篇文章時，鉤子還處于內部測試(alpha)階段。它們的API隨時都可能改變。
我建議你在你的業余項目中體驗鉤子，在它們成為穩定版本之前，不要在線上代碼中使用。

待辦事項清單是使用廣泛的例子，理由很充分——它們是很棒的練習工具。無論你想嘗試任何語言或庫我都推薦使用它。
在這個例子中，我們只實現其中的一小部分功能：

使用Material Design展示事項列表

通過input添加事項

刪除事項

這是github和CodeSandbox的地址

git clone https://github.com/yazeedb/react-hooks-todo
cd react-hooks-todo
npm install

master分支已經實現了這些功能，如果你想自己跟著實現，請切到start分支。

git checkout start

啟動工程

npm start

這個應用應該跑在localhost:3000上，這是初始UI:

我們已經設置了material-ui來給頁面一個專業的外觀，現在我們加入更多功能！

添加一個新文件，src/TodoForm.js。這是初始代碼：

import React from "react";
import TextField from "@material-ui/core/TextField";
const TodoForm = ({ saveTodo }) => {
  return (
    

      
    
  );
};
export default TodoForm;

通過組件名字，我們就知道它是用來添加事項的，它也就是我們的第一個鉤子。

看這段代碼：

import { useState } from "react";
const [value, setValue] = useState("");

useState是一個接收初始狀態(state)返回一個數組的函數。console.log 它吧。
數組的第一個值是你的state現在的值，第二個值是state的更新方法。

所以我們把它們叫做value和setValue, 并使用es6解構賦值對它們進行賦值。

我們的表單應該跟蹤input的值并在保存提交時執行saveTodo方法。useState能幫我們實現它。

更新updateForm.js， 這是更新之后的代碼：

import React, { useState } from "react";
import TextField from "@material-ui/core/TextField";
const TodoForm = ({ saveTodo }) => {
  const [value, setValue] = useState("");
  return (
    
onSubmit={event => {
        event.preventDefault();
        saveTodo(value);
      }}
      
    >
       {
          setValue(event.target.value);
        }}
        value={value}
      />
    
  );
};
export default TodoForm;

回到index.js，引入并且使用這個組件。

...
import TodoForm from "./TodoForm";
...
const App = () => {
  return (
    

    
      Todos
    
    
   
  );
};

現在你在input輸入的值已經可以被打印出來了。（記得敲enter哦）

我們的事項列表todos也需要state。在index.js中引入useState。初始state應該是空數組。

import React, { useState } from "react";
...
const App = () => {
  const [todos, setTodos] = useState([]);
  return ...

建立一個新文件:src/TodoList.js

大部分代碼是來自Material-UI庫的高級組件， 這是更新之后的代碼：

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";

const TodoList = ({ todos, deleteTodo }) => (
  
    {todos.map((todo, index) => (
      
        
        
        
           {
              deleteTodo(index);
            }}
          >
            
          
        
      
    ))}
  
);

export default TodoList;

它接收兩個屬性：

todos： 事項數組，我們遍歷數組，建立每一個事項

deleteTodo： 點擊一個事項的刪除按鈕觸發這個方法，它接收一個參數： 索引，這個索引唯一標識每一個事項。

在index.js中引入這個組件。

...
import TodoList from "./TodoList";
import "./styles.css";
const App = () => { ...

并在App方法中使用它：

...

還是在index.js中，編輯TodoForm的屬性， saveTodo：

 {
    const trimmedText = todoText.trim();
    if (trimmedText.length > 0) {
      setTodos([...todos, trimmedText]);
    }
  }}
/>

這里我們只是把空格去掉，把新的值添加到todos中。

我們現在可以添加事項了！

現在添加新的事項后，我們沒有把input清空，這是不好的用戶體驗！
我們只需要在TodoForm.js中做一點小改動，就可以修復它。

 {
    event.preventDefault();
    saveTodo(value);
    setValue("");
  }}
>

當事項被保存后，我們就把form的state變成空字符串。
現在看起來很好了！

TodoList為每一條事項都提供了索引，根據索引我們能找到我們想刪除的事項。

// TodoList.js
 {
    deleteTodo(index);
  }}
>
  

在index.js中傳遞這個函數

 {
    const newTodos = todos
      .filter((_, index) => index !== todoIndex);
  
    setTodos(newTodos);
  }}
/>

我們使用setTodos方法把所有不符合index的事項保存下來。
刪除功能完成！

文章開頭我提到 鉤子便于分離狀態和組件的邏輯。所以我們在這個應用中可以這樣做。

新建一個文件叫src/useTodoState.js

import { useState } from "react";

export default initialValue => {
  const [todos, setTodos] = useState(initialValue);

  return {
    todos,
    addTodo: todoText => {
      setTodos([...todos, todoText]);
    },
    deleteTodo: todoIndex => {
      const newTodos = todos
        .filter((_, index) => index !== todoIndex);

      setTodos(newTodos);
    }
  };
};

這就是index.js中原來的代碼，我們只是把它分離出來了！我們的狀態處理邏輯不再和組件混在一起了！

現在我們只需要引入它，這是更新之后的代碼：

import React from "react";
import ReactDOM from "react-dom";
import Typography from "@material-ui/core/Typography";
import TodoForm from "./TodoForm";
import TodoList from "./TodoList";
import useTodoState from "./useTodoState";
import "./styles.css";

const App = () => {
  const { todos, addTodo, deleteTodo } = useTodoState([]);

  return (
    

      
        Todos
      

       {
          const trimmedText = todoText.trim();

          if (trimmedText.length > 0) {
            addTodo(trimmedText);
          }
        }}
      />

      
    
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

現在一切工作正常！

我們可以對表單做同樣的處理！
新建一個文件：src/useInputState.js

import { useState } from "react";

export default initialValue => {
  const [value, setValue] = useState(initialValue);

  return {
    value,
    onChange: event => {
      setValue(event.target.value);
    },
    reset: () => setValue("")
  };
};

現在todoForm.js應該變成這樣：

import React from "react";
import TextField from "@material-ui/core/TextField";
import useInputState from "./useInputState";

const TodoForm = ({ saveTodo }) => {
  const { value, reset, onChange } = useInputState("");

  return (
     {
        event.preventDefault();

        saveTodo(value);
        reset();
      }}
    >
      
    
  );
};

export default TodoForm;

現在我們全部完成了！
希望你喜歡！！
謝謝！
作者：Yazeed Bzadough