reactjs - 如何使用钩子在 React 中编辑我的待办事项?
问题描述
这是我的代码框显示应用程序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>
));
};
解决方案
将待办事项文本放入输入中,并使用 todo.id 将其绑定到具有 onChange 的数据模型
推荐阅读
- java - 在表格下方显示每种产品的总金额
- asp.net-core - Blazor Javascript isolation with NPM dependencies
- java - JpaSpecification using Generics. Works with string, but issues with Date and joined fields
- c++ - How to link libraries properly using CMakeLists.txt for MinGW?
- reactjs - How can i run reactjs locally on mac other than the npx create-react-app?
- database - 在 Mule 4 中,如何使用数据库连接器保存从数据库中检索的数据?
- nginx - nginx配置中的`_`是什么意思?
- python - 如何在 python win32api 上获取全局滚动事件
- php - 如何修复 WordPress 中的 MySQL 服务器已消失错误。并且错误建立了数据库连接
- javascript - 无论我尝试什么,我的不和谐机器人自然会阻止 DM 选项