背景

To-do list（待辦事項(xiàng)列表）是用來記錄和管理要完成的任務(wù)、活動(dòng)或項(xiàng)目的列表。它是一種簡(jiǎn)單而常見的工具，用于幫助人們組織和安排日常生活中的任務(wù)。每當(dāng)您有一項(xiàng)任務(wù)需要完成或者要記住某些事情時(shí)，您可以將它添加到待辦事項(xiàng)列表中。

學(xué)習(xí)前端的一些新知識(shí)時(shí)，經(jīng)常將使用這個(gè)工具實(shí)現(xiàn) Todo list 來作為入門的開發(fā)

使用 React Hooks 以及組件庫 Antd 來實(shí)現(xiàn)一個(gè)可以 增刪 標(biāo)記是否完成 的 todo-list

思路

1. 要實(shí)現(xiàn)一個(gè) todo-list 首先想到用 useState 維護(hù)一個(gè)狀態(tài)數(shù)組來保存當(dāng)前 list ，還要用一個(gè)狀態(tài)維護(hù)添加框中的內(nèi)容

 const [todos, setTodos] = useState(initialValue);
 const [inputValue, setInputValue] = useState("");

3. 然后因?yàn)槭强稍鰟h，那要有一個(gè)可以增加的 Input 框和添加按鈕，刪除時(shí)要針對(duì)所在的那一行，所以每一個(gè)待辦事項(xiàng)后面都有屬于他自己的刪除按鈕，所以想到用 map 方法來實(shí)現(xiàn)每一行代辦事項(xiàng)以及完成狀態(tài)、改變完成狀態(tài)，刪除按鈕的展現(xiàn)。
4. 因?yàn)槲覀兛梢愿淖儺?dāng)前事項(xiàng)的完成狀態(tài)，所以我們可以引入一個(gè) Checkbox 標(biāo)識(shí)當(dāng)前行的完成狀態(tài)，變?yōu)槭芸亟M件，可以改變當(dāng)前行的狀態(tài)，新增的 Input 框同理

 		<Input
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onPressEnter={handleAddTodo}
          placeholder="輸入待辦事項(xiàng)"
        />
        <Button type="primary" onClick={handleAddTodo}>
          添加
        </Button>
         <ul>
          {todos.map((todo, index) => (
            <li key={index} style={{ marginBottom: 15 }}>
              <Space>
                <Checkbox
                  checked={todo.completed}
                  onChange={() => handleToggleComplete(index)}
                />
                {todo.text}
                <Tag color={todo.completed ? "green" : "red"}>
                  {todo.completed ? "已完成" : "   待辦"}
                </Tag>
                <Button type="dashed" onClick={() => handleDeleteTodo(index)}>
                  刪除
                </Button>
              </Space>
            </li>
          ))}
        </ul>

5. 最后寫一下各種受控組件的 onChange 方法，以及按鈕的 onClick 方法，大功告成

const handleAddTodo = () => {
    if (inputValue.trim() !== "") {
      setTodos([...todos, { text: inputValue, completed: false }]);
      setInputValue("");
    }
  };

  const handleDeleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  const handleToggleComplete = (index) => {
    const newTodos = [...todos];
    newTodos[index].completed = !newTodos[index].completed;
    setTodos(newTodos);
  };

6. 至此，可以進(jìn)行添加，刪除，改變完成狀態(tài)的基本 todo-list 已經(jīng)完成 ，可以在這個(gè)基礎(chǔ)上進(jìn)行其他功能的添加！

完成代碼

以上步驟所有的完整代碼，點(diǎn)開即用文章來源地址http://www.zghlxwxcb.cn/news/detail-582245.html

• 鏈接

到了這里，關(guān)于前端基本功 用 React Hooks + Antd 實(shí)現(xiàn)一個(gè) Todo-List的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！