如何使用钩子在 React 中编辑我的待办事项？

Question

Here is my codesandbox showing the app https://codesandbox.io/s/vibrant-ptolemy-i8f74?file=/src/TodoList.js

Right now the code allows me to add, cross out, and delete a todo item, but I want to be able to edit the todos as well.

I'm not too sure how I would go about it?

This is the current todo item code

      const Todo = ({ todos, completeTodo, removeTodo }) => {
        return todos.map(todo => (
          <div className='todo-row'>
            <div
              key={todo.id}
              className={todo.isComplete ? 'complete' : ''}
              onClick={() => completeTodo(todo.id)}
            >
              {todo.text}
            </div>
            <FaWindowClose onClick={() => removeTodo(todo.id)} />
          </div>
        ));
      };

Answer 1

将待办事项文本放入输入中，并使用 todo.id 将其绑定到具有 onChange 的数据模型

Answer 2

https://codesandbox.io/s/interesting-browser-25ciw?file=/src/Todo.js

1. add updateTodo function in TodoList.js
2. add props.edit in TodoForm.js
3. create edit state in Todo.js and change to TodoForm component if edit.id has value