如何从 typescript 的待办事项列表中删除项目

Question

I am new to TS and I'm trying to delete one item out of the to-do list, but I am stuck on how to implement that. I need some help. I created a deleteHandeler function that should go into the button underneath the Thank you in advance.

here is the todo list component. I have another form component that handles the input and the submit button, so nothing much going on there.

import { ToDoListItems } from "./Todo-list-item";
import "./index.css"

interface TodoListProps {
    todos: Array<Todo>;
    toggleTodo: (SelectedItems: Todo) => void;
   
}

const deleteHandler = (e: ChangeEvent<HTMLButtonElement>) => {
   
}


export const TodoList: React.FC<TodoListProps> = ({ todos, toggleTodo }) => {
    return todos.length > 1 ? ( //if the value is greater than 3 then, the msg below will appear 
        (
            <ul>
                {todos.map((todo) => (
                    <li className="parent">
                        <ToDoListItems todo={todo} toggleTodo={toggleTodo}> </ToDoListItems>
                        <button className="DeleteTodo" onClick={() =>{console.log("clicked")}} >X</button>    
                    </li>
                ))}

            </ul>
        )
   ) : (
    <h2>Please add some Todos.</h2>
  );
}






const initialTodos: Array<Todo> = [
  { text: "walk the dog!", complete: false },
  { text: " learn how to creat app with typescript", complete: false }
];

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

  const toggleTodo: ToggleTodo = selectedTodo => {
    const newTodos = todos.map(todoItems => {
      if (todoItems === selectedTodo) {
        return {
          ...todoItems,
          complete: !todoItems.complete
        };
      }
      return todoItems;
    });
    setTodos(newTodos);
  };


  const addTodo: AddTodo = newTodo => {
    newTodo.trim() !== "" && setTodos([...todos, { text: newTodo, complete: false }])
  }


  return (
    <React.Fragment>
      <TodoList todos={todos} toggleTodo={toggleTodo} />
      <AddTodoForm addTodo={addTodo} />
    </React.Fragment>



  );
}

export default App;

Answer 1

You can use .filter to take out the related todo item you do want. Below example assume that you are using name as a criterion.

export const TodoList: React.FC<TodoListProps> = ({ todos, toggleTodo, setNewToDo }) => {
    
    const deleteHandler = = (e: ChangeEvent<HTMLButtonElement>) => {
       const newToDoItems = todos.filter(todo => todo.name === e.target.name)  

       setNewToDo(newToDoItems)
    }

    return todos.length > 1 ? ( 
        (
            //...other code
            <button className="DeleteTodo" onClick={deleteHandler} >X</button>    
            //...other code
       )
}

Answer 2

Example

const deleteHandler = (id: any) => {
    // Example you have to put these lines,  where your state is sitting    
    // I assumed todo.id here as a unique identifier for your todos list    
    // this.setState({ todos: todos.filter((todo:any) => todo.id !== id ) }); 

}


export const TodoList: React.FC<TodoListProps> = ({ todos, toggleTodo }) => {
    return todos.length > 1 ? ( //if the value is greater than 3 then, the msg below will appear 
        (
            <ul>
                {todos.map((todo) => (
                    <li className="parent">
                        <ToDoListItems todo={todo} toggleTodo={toggleTodo}> </ToDoListItems>
                        <button className="DeleteTodo" onClick={this.deleteHandler.bind(this, todo.id} >X</button>    
                    </li>
                ))}

            </ul>
        )    ) : (
    <h2>Please add some Todos.</h2>   ); }