如何使用钩子在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. 在updateTodo中添加TodoList.js函数
2. 在props.edit中添加TodoForm.js
3. 在edit中创建Todo.js状态，如果TodoForm具有值，则更改为edit.id分量