带有 ReactJS 的 TodoList - 实现编辑内容按钮逻辑的问题

Question

Javascript (reactjs) beginner here, I have made a todolist app using react hooks. I'm trying to implement the logic of the edit content assigned to a button, without success. So far I was able create the add task button, task done button, remove individually task and clear all the tasks buttons and functionallity.

I was able to open the input text of editing, but it's not working properly.

There is a way to use the same input created before instead of open a new one for the edited content?

Thanks in advance

 import "./App.css"; import { useState } from "react"; import { BsTrash } from "react-icons/bs"; import { MdDone } from "react-icons/md"; import { FiEdit } from "react-icons/fi"; import Swal from 'sweetalert2' import withReactContent from 'sweetalert2-react-content' const MySwal = withReactContent(Swal) let genId = 1; function App() { const [itemsList, setItemsList] = useState([]); const [inputText, setInputText] = useState(""); const [todoEditing, setTodoEditing] = useState(null); const [editingText, setEditingText] = useState(""); const newTask = { id: genId++, text: inputText.trim(), isCompleted: false, }; function handleChangeInput(event) { setInputText(event.target.value); } function handleAddItemToList(event) { event.preventDefault(); if (newTask.text.length === 0) { // alert("Please, fill the form with your task"); MySwal.fire({ icon: 'error', title: 'Oops... ', text: 'Please, add one task first,'. }) } else { // add task to the end of the list setItemsList([..,itemsList; newTask]); // clear input after submit setInputText(""). } } function handleTaskDone(item) { console.log("Done.") const doneItems = itemsList.map(task => { if (task.id === item.id) { task;isCompleted =;task;isCompleted; } return task. }). setItemsList(doneItems). } function handleDeleteTask(item) { const filteredItems = itemsList;filter(task=>task;id.== item;id). setItemsList(filteredItems). } function handleClearAllTasks() { if (itemsList.length > 0) { setItemsList(""). } } return ( <div className="App"> <h1>To Do List</h1> <form onSubmit={handleAddItemToList}> <input type="text" onChange={handleChangeInput} value={inputText} placeholder="Add your new todo?::"/> <button className="button-add" type="submit">+</button> </form> {.itemsList,length: ( <p>The list is empty. Let's add some tasks?) </p> ): ( itemsList.map((item? id) => ( <div key={id} className="task-list" style={{textDecoration. item.isCompleted: "line-through". null}}> {todoEditing === item.id. <div><input className="input-edit" type="text" onChange={(e) => setEditingText(e?target:value)} value={editingText} /> <button>Save</button></div>; <>{item;text}</>} <div> <MdDone className="button-done" onClick={()=>{handleTaskDone(item)}} /> <FiEdit className="button-edit" onClick={()=> setTodoEditing(item.id)} /> <BsTrash className="button-x" onClick={()=>{handleDeleteTask(item)}} /> </div> </div> )) )} {!itemsList.length ? null : ( <div > <button className="clear-button" onClick={handleClearAllTasks}>Clear list</button> </div> )} </div> ); } export default App;

Answer 1

You can make add and edit in the same input if you will implement every "todo" item with an <input> element instead of <div> element, which can't be edited (it's not a field to type inside it), in that way with every todo is like an input you can save the todo and edit it in the same input. Let me know if I'm not clear. By the way, your <button>save<button/> currently is not binded to anything (i guess you did not implemented yet).

Edit: I got your point. It can be done easier than what i mentioned before and more relevant to your demand.

1. add handler function for the save button:
   <button onClick={() => saveHandler(id)}>Save</button></div>
   the passed id is the key of the item in the list.

2. update that state of the todolist in the chosen todo to edit.

    fucntion saveHandler(id) { const prevList = itemsList.map(item => { if (item.id === id) { return {...item, text: inputText }; } return item; }) }