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

Question

这是我的代码和框显示应用程序https://codesandbox.io/s/vibrant-ptolemy-i8f74?file=/src/TodoList.js

现在，代码允许我添加、划掉和删除待办事项，但我也希望能够编辑待办事项。

我不太确定我会怎么做？

这是当前的待办事项代码

      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. 在TodoList.js添加updateTodo函数
2. 在props.edit中添加TodoForm.js
3. 在Todo.js创建edit状态并在edit.id有值时更改为TodoForm组件