如何使用React(函数组件)删除列表项

Question

只是在一个简单的工作清单的做法，我希望能够点击一个项目在我的列表中删除它。我想我有它非常接近，但无法弄清楚如何从点击li中获得某种数据，以比较它与我的数组。

App.js

import { useState } from "react";
import "./App.css";
import Newtodo from "./NewTodo/NewTodo";
import TodoList from "./TodoList/TodoList";
let INITIAL_TODOS = [
{ id: "e1", title: "Set up meeting", date: new Date(2021, 0, 14), index: 0 },
{
id: "e2",
title: "Doctor appointment",
date: new Date(2021, 2, 14),
index: 1,
},
{ id: "e3", title: "Work on project", date: new Date(2021, 1, 22), index: 2 },
{ id: "e4", title: "Update resume", date: new Date(2021, 6, 14), index: 3 },
];
const App = () => {
const [todos, setTodos] = useState(INITIAL_TODOS);
const deleteItem = (e) => {
const newTodos = todos.filter((item) => item.index !== 1 /*This works properly with a hardcoded value(1) but how can this be done dynamically as e doesn't seem to have anything useful within it (like e.target.value)*/);
setTodos(newTodos);
};
return (
<div className="App">
<Newtodo />
<TodoList items={todos} handleDelete={deleteItem} />
</div>
);
};
export default App;

TodoList.js

import "./TodoList.css";
import Todo from "./Todo";
const TodoList = (props) => {
return (
<div className="todo-list">
<ul>
{props.items.map((todo, i) => (
<Todo
index={i}
key={todo.id}
title={todo.title}
date={todo.date}
handleDelete={props.handleDelete}
/>
))}
</ul>
</div>
);
};
export default TodoList;

Todo.js

import "./Todo.css";
const Todo = (props) => {
const month = props.date.toLocaleString("en-US", { month: "long" });
const day = props.date.toLocaleString("en-US", { day: "2-digit" });
const year = props.date.getFullYear();
return (
<li onClick={props.handleDelete} className="todo-item">
<h2>{props.title}</h2>
<span>
{day}, {month}, {year}
</span>
</li>
);
};
export default Todo;

任何帮助或指导将非常感激!

Answer 1

需要传递要删除的元素的索引。在delete处理程序中，通过索引而不是的元素筛选等于传递的索引

const deleteItem = (index) => {
setTodos(todos => todos.filter((item, i) => i !== index));
};

在映射

const TodoList = (props) => {
return (
<div className="todo-list">
<ul>
{props.items.map((todo, i) => (
<Todo
index={i}
key={todo.id}
title={todo.title}
date={todo.date}
handleDelete={() => props.handleDelete(i)}
/>
))}
</ul>
</div>
);
};

使用id属性可能会更好。

const deleteItem = (id) => {
setTodos(todos => todos.filter((item) => item.id !== id));
};

…

const TodoList = (props) => {
return (
<div className="todo-list">
<ul>
{props.items.map((todo, i) => (
<Todo
index={i}
key={todo.id}
title={todo.title}
date={todo.date}
handleDelete={() => props.handleDelete(todo.id)}
/>
))}
</ul>
</div>
);
};

为了避免子组件中的匿名回调，将handleDelete声明为柯里化函数。

const deleteItem = (id) => () => {
setTodos(todos => todos.filter((item) => item.id !== id));
};

…

const TodoList = (props) => {
return (
<div className="todo-list">
<ul>
{props.items.map((todo, i) => (
<Todo
index={i}
key={todo.id}
title={todo.title}
date={todo.date}
handleDelete={props.handleDelete(todo.id)}
/>
))}
</ul>
</div>
);
};

Answer 2

首先你需要将你的todo id传递给handle delete然后你可以在那里访问id

{ props.items.map((todo, i) => (
<Todo
index={i}
key={todo.id}
title={todo.title}
date={todo.date}
handleDelete={()=> props.handleDelete(todo.id)}
/>
))}

你在这里访问id

const deleteItem = (todoId) => {
const newTodos = todos.filter((item) => item.id !== todoId;
setTodos(newTodos);
};

Answer 3

在Todo.js中添加data-index属性

<li data-index={props.index} onClick={props.handleDelete} className="todo-item">
<h2>{props.title}</h2>
<span>
{day}, {month}, {year}
</span>
</li>

，在deleteTodo

中删除

const deleteItem = (e) => {
const newTodos = todos.filter((item) => +item.index !== +e.currentTarget.dataset.index)
setTodos(newTodos);
};