繼昨天的表單，我們要繼續幫他加上功能。

監控送出按鈕

使用者click或enter時，將資料傳到toDoList的陣列中

const handleSubmit=(e)=>{
    e.preventDefault()
    if(userInput){
        addTask(userInput)
    }
    setUserInput("")
}

<form onSubmit={handleSubmit}>
	...略
</form>

新增代辦

做到剛剛的步驟就會發現我們缺了一個addTask。我們的toDoList是在App.js中控制的，因此addTask也需要回到那邊執行。

複製一份toDoList陣列，將新的userInput內容疊加到這個新的陣列上，setToDoList把我們新增的內容渲染在畫面上。

const addTask = (userInput) => {
 let copy = [...toDoList];
 copy = [...copy, { id: toDoList.length + 1, task: userInput, complete: false }];
 setToDoList(copy);
}

重複id問題

做到剛剛那個步驟後其實已經將近完成了，但在做測試的時候會發先，當你清除掉已完成的內容後再次新增，會發現id值會因為toDoList的length改變而從新排序，因而有重複id的可能。

可以在上一步驟做一點改變就可以解決這個問題。

找到toDoList陣列中的最後一筆id，新增的id依照最後一筆去定義值。

const addTask = (userInput)=>{
  console.log(toDoList.slice(-1)[0].id+1)
  let copy = [...toDoList]
  copy=[...copy,{id:toDoList.slice(-1)[0].id+1,task:userInput,complete:false}]
  setToDoList(copy)
}

範例連結

結語

30天結束拉!! 中間因為一次的失誤忘記發文讓這次的挑戰失敗，但是我還是希望這次的挑戰有始有終，要給它完整的30篇。

React還有很多的功能要再繼續深造，覺得還需要一些時間去慢慢累積，目標就是要完成一個作品!

2022 iThome 鐵人賽 **結束✌?