[英]How to edit a todo in a todo list without hooks and redux
I have been stuck on this for days reading up on tutorials and articles but can not figure this out.几天来,我一直在阅读教程和文章,但无法弄清楚这一点。 Whenever I click on the pencil icon, I want it to edit the current do to.
每当我单击铅笔图标时,我都希望它编辑当前的操作。 I have 4 components, the form (searchbar where i add todo), the app.js, the todoList, and a todo.js component.
我有 4 个组件,表单(我添加 todo 的搜索栏)、app.js、todoList 和一个 todo.js 组件。 I am keeping all the state in the app and state in the form to keep track of the terms I am entering.
我将所有 state 保留在应用程序中,并将 state 保留在表格中,以跟踪我输入的条款。
I am thinking I would need to create an editTodo method in the app and pass it down as a prop to the list and then the todoItem.我想我需要在应用程序中创建一个 editTodo 方法并将其作为道具传递给列表,然后传递给 todoItem。 Most tutorials or help online uses hooks or redux but I am learning vanilla React first.
大多数教程或在线帮助使用钩子或 redux 但我首先学习香草 React。 I am not asking for the answer directly but rather the steps or thought process to implement editing a todo item in the todolist.
我不是直接要求答案,而是在 todolist 中实现编辑 todo 项目的步骤或思考过程。 I am not sure even if my todo app is correct in the places where I am keeping state.
即使我的待办事项应用程序在我保存 state 的地方是否正确,我也不确定。 I may get slack for asking.. but I do not know what else to do.
我可能会因为问而懈怠……但我不知道还能做什么。 Here is my code..
这是我的代码..
class App extends React.Component {
state = {
todos: []
}
addTodo = (todo) => {
const newToDos = [...this.state.todos, todo];
this.setState({
todos: newToDos
});
};
deleteTodo = (id) => {
const updatedTodos = this.state.todos.filter((todo) => {
return todo.id !== id;
});
this.setState({
todos: updatedTodos
});
}
editTodo = (id, newValue) => {
}
render() {
return (
<div className="container">
<div className="row">
<div className="col">
<Form addTodo={this.addTodo} />
</div>
</div>
<div className="row">
<div className="col">
<ToDoList
todos={this.state.todos}
deleteTodo={this.deleteTodo}
editingTodo={this.state.editingTodo}/>
</div>
</div>
</div>
)
}
}
export default App;
const ToDoList = ({todos, deleteTodo, editingTodo}) => {
const renderedList = todos.map((todo, index) => {
return (
<ul className="list-group" key={todo.id}>
<ToDoItem todo={todo} deleteTodo={deleteTodo} editingTodo={editingTodo}/>
</ul>
)
});
return (
<div>
{renderedList}
</div>
)
}
export default ToDoList;
const ToDoItem = ({todo, deleteTodo}) => {
return (
<div>
<li style={{display: 'flex', justifyContent: 'space-between' }} className="list-group-item m-3">
{todo.text}
<span>
<FontAwesomeIcon
icon={faPencilAlt}
style={{ cursor: 'pointer'}}
/>
<FontAwesomeIcon
icon={faTrash}
style={{ marginLeft: '10px', cursor: 'pointer'}}
onClick={ () => deleteTodo(todo.id)}
/>
</span>
</li>
</div>
);
}
export default ToDoItem;
I don't think the form component is relevant here as I am trying to edit a todo item so will not include it here.我不认为表单组件与此处相关,因为我正在尝试编辑待办事项项目,因此不会在此处包含它。 If I do need to include it, let me know.
如果我确实需要包含它,请告诉我。 It may not look like I have tried to implement this functionality, but either I could not find what I was looking for, understand the code, or just do not know how to implement it.
看起来我似乎没有尝试实现此功能,但要么我找不到我正在寻找的东西、理解代码,要么就是不知道如何实现它。
Update:更新:
I added an isEditing field in the form component to my todo items so that maybe it can help me know if an item is being editing or not.我在表单组件中添加了一个 isEditing 字段到我的待办事项中,这样也许它可以帮助我知道一个项目是否正在编辑。 I also redid the editTodo method.
我还重做了 editTodo 方法。
class Form extends React.Component {
state = { term: ''};
handleSubmit = (e) => {
e.preventDefault();
this.props.addTodo({
id: shortid.generate(),
text: this.state.term,
isEditing: false
});
this.setState({
term: ''
});
}
editTodo = (id, newValue) => {
const editedTodos = [...this.state.todos].map((todo) => {
if(todo.id === id) {
todo.isEditing = true;
todo.text = newValue;
}
return todo.text;
});
this.setState({
todos: [...this.state.todos, editedTodos]
});
}
I also passed that method down to the todoList and then to the todoItem like so我还将该方法传递给 todoList,然后像这样传递给 todoItem
const ToDoItem = ({todo, deleteTodo, editTodo}) => {
const renderContent = () => {
if(todo.isEditing) {
return <input type='text' />
} else {
return <span>
<FontAwesomeIcon
icon={faPencilAlt}
style={{ cursor: 'pointer'}}
onClick={ () => editTodo(todo.id, 'new value')}
/>
<FontAwesomeIcon
icon={faTrash}
style={{ marginLeft: '10px', cursor: 'pointer'}}
onClick={ () => deleteTodo(todo.id)}
/>
</span>
}
}
return (
<div>
<li style={{display: 'flex', justifyContent: 'space between'}} className="list-group-item m-3">
{{!todo.isEditing ? todo.text : ''}}
{renderContent()}
</li>
</div>
);
}
So whenever I click on the the edit icon, it successfully shows 'new value' but now also adds an extra todo item which is blank.因此,每当我单击编辑图标时,它都会成功显示“新值”,但现在还添加了一个额外的空白待办事项。 I figured out how to add the input field so that it shows also.
我想出了如何添加输入字段以便它也显示。 I am accepting the answer Brian provided since it was the most helpful in a lot of ways but have not completed the functionality for editing a todo.
我接受 Brian 提供的答案,因为它在很多方面都是最有帮助的,但还没有完成编辑待办事项的功能。
am thinking I would need to create an editTodo method in the app and pass it down as a prop to the list and then the todoItem.
我想我需要在应用程序中创建一个 editTodo 方法并将其作为道具传递给列表,然后传递给 todoItem。
This is exactly what you need to do.这正是您需要做的。 And yet:
但是:
editTodo
method has no logic in it. editTodo
方法中没有任何逻辑。ToDoList
component receives editingTodo
method as a prop instead of defined editTodo
. ToDoList
组件接收editingTodo
方法作为道具,而不是定义的editTodo
。editingTodo
futher down to ToDoItem
but you are not utilising it there const ToDoItem = ({todo, deleteTodo}) =>...
editingTodo
进一步向下传递给ToDoItem
,但您没有在那里使用它const ToDoItem = ({todo, deleteTodo}) =>...
onClick
listener on the pencil icon, so nothing can happen.onClick
侦听器,因此不会发生任何事情。() => editTodo(id, newText)
.() => editTodo(id, newText)
触发您的铅笔 onClick 监听器() => editTodo(id, newText)
。 My recommendation would be - address all 5 points above and for now just hardcode the new value, just to test it out: () => editTodo(id, 'updated value!')
and check that everything works.我的建议是 - 解决以上所有 5 点,现在只需硬编码新值,只是为了测试它:
() => editTodo(id, 'updated value!')
并检查一切是否正常。 You can worry about getting the real value in there as your next step.作为下一步,您可以担心在那里获得真正的价值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.