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

Question

I'm trying to figure out how to edit a todo item in my react app using hooks, but I can't seem to figure out how to write the code.

Most of the solutions I've seen online are using class components and it's not written with the same logic as my app.

Here is my current code

  function TodoList() {
        const [todos, setTodos] = useState([]);

        const addTodo = todo => {
          if (!todo.text || /^\s*$/.test(todo.text)) {
            return;
          }

          const newTodos = [todo, ...todos];

          setTodos(newTodos);
          console.log(newTodos);
        };

        const removeTodo = id => {
          const removedArr = [...todos].filter(todoId => todoId.id !== id);

          setTodos(removedArr);
        };

        const completeTodo = id => {
          let updatedTodos = todos.map(todo => {
            if (todo.id === id) {
              todo.isComplete = !todo.isComplete;
            }
            return todo;
          });
          setTodos(updatedTodos);
        };

        const editTodo = e => {
          setTodos(e.target.value);
        };

        return (
          <>
            <TodoForm onSubmit={addTodo} />
            {todos.map(todo => (
              <div>
                <div
                  key={todo.id}
                  className={todo.isComplete ? 'complete' : ''}
                  key={todo.id}
                  onClick={() => completeTodo(todo.id)}
                >
                  {todo.text}
                </div>
                <FaWindowClose onClick={() => removeTodo(todo.id)} />
              </div>
            ))}
          </>
        );
      }

Here is the code from the other component

        function TodoForm(props) {
          const [input, setInput] = useState('');

          const handleChange = e => {
            setInput(e.target.value);
          };

          const handleSubmit = e => {
            e.preventDefault();

            props.onSubmit({
              id: Math.floor(Math.random() * 10000),
              text: input,
              complete: false
            });
            setInput('');
          };

          return (
            <form onSubmit={handleSubmit}>
              <input
                placeholder='todo...'
                value={input}
                onChange={handleChange}
                name='text'
              />
              <button onClick={handleSubmit}>add todo</button>
            </form>
          );
        }

So right now everything works where I can add todos and delete todos + cross out todos. Only thing missing is being able to edit them.

I saw some suggestions about updating the text value with an input form, but I'm not too sure how I'd implement that in my editTodo function.

Answer 1

Similar to your removeTodo handler, you want to pass the todo.id to completeTodo.

<div className={todo.isComplete ? "complete" : ""} key={todo.id} onClick={() => completeTodo(todo.id)}>

Then you would update a bool value in the todo object.

const completeTodo = (id) => {
   let updatedTodos = todos.map(todo => {
        if(todo.id === id){
            todo.isComplete = true
         }
       return todo
  }) 
    setTodos(updatedTodos)
};

Edit: add styling strikethrough You'll then conditionally add a css style based on isComplete boolean

CSS

.complete {
    text-decoration: line-through;
}

To be able to click on the Remove button, place it outside the todo div in your map function.

{todos.map((todo, isComplete) => (
          <>
              <div
                key={todo.id}
                onClick={completeTodo}
                className={isComplete ? 'complete' : ''}
              >
                {todo.text}
                
              </div>
             <FaWindowClose onClick={() => removeTodo(todo.id)} />
         </>
 ))}

Answer 2

As discussion with you in another question here it is:

TodoList.js

import React, { useState } from "react";
import TodoForm from "./TodoForm";
import Todo from "./Todo";

function TodoList({ onClick }) {
  const [todos, setTodos] = useState([]);
  //Track is edit clicked or not
  const [editId, setEdit] = useState(false);
  //Save input value in input box
  const [inputValue, setInputValue] = useState("");

  const handleEditChange = (id, text) => {
    setEdit(id);
    setInputValue(text);
  };
  const addTodo = (todo) => {
    if (!todo.text || /^\s*$/.test(todo.text)) {
      return;
    }

    const newTodos = [todo, ...todos];

    setTodos(newTodos);
    console.log(newTodos);
  };

  const removeTodo = (id) => {
    const removedArr = [...todos].filter((todoId) => todoId.id !== id);

    setTodos(removedArr);
  };

  const completeTodo = (id) => {
    let updatedTodos = todos.map((todo) => {
      if (todo.id === id) {
        todo.isComplete = !todo.isComplete;
      }
      return todo;
    });
    setTodos(updatedTodos);
  };

  const editTodo = (id, text) => {
    let editTodos = todos.map((todo) => {
      if (todo.id === id) {
        todo.text = text;
      }
      return todo;
    });
    setTodos(editTodos);
    setEdit(false);
  };

  return (
    <>
      <TodoForm onSubmit={addTodo} />
      {/* I want to move this code below into a new component called Todo.js */}
      <Todo
        todos={todos}
        completeTodo={completeTodo}
        removeTodo={removeTodo}
        editTodo={editTodo}
        handleEditChange={handleEditChange}
        editId={editId}
        inputValue={inputValue}
        setInputValue={setInputValue}
      />
    </>
  );
}

export default TodoList;

Todo.js

// I want to move this code into this component
import React, { useState } from "react";

import { FaWindowClose, FaRegEdit } from "react-icons/fa";

const Todo = ({
  todos,
  completeTodo,
  removeTodo,
  editTodo,
  editId,
  handleEditChange,
  inputValue,
  setInputValue
}) => {
  return todos.map((todo) => (
    <div className="todo-row">
      {editId === todo.id ? (
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
      ) : (
        <div
          key={todo.id}
          className={todo.isComplete ? "complete" : ""}
          onClick={() => completeTodo(todo.id)}
        >
          {todo.text}
        </div>
      )}
      {editId === todo.id ? (
        <button onClick={() => editTodo(todo.id, inputValue)}>Edit todo</button>
      ) : (
        <>
          <FaWindowClose onClick={() => removeTodo(todo.id)} />
          <FaRegEdit onClick={() => handleEditChange(todo.id, todo.text)} />
        </>
      )}
    </div>
  ));
};

export default Todo;

Make sure you read and understand code first. Logic is pretty simple what you do in completeTodo . You just need to update text part. Tricky part is to open in input. So logic is like track if user click on id set that id. And check if id is there open input with that id value other wise normal one.

Here is demo of this POC: https://codesandbox.io/s/nostalgic-silence-idm21?file=/src/Todo.js:0-1059