React CRUD从表中删除条目

Question

我正在React中构建一个CRUD应用程序(类似于网络上的todo应用程序(，但主要区别是我将每个条目附加到引导Table中。这可能不是表示数据的最佳方式，但它可以帮助我快速起步，而不必经过一些CSS样式，而我在这方面相当薄弱。

我的目标是能够在出现警告提示后，从Table中删除任何给定的条目。然而，我不确定这样做的最佳方式。所以这里是Form来输入玩家的名字：

import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
const PlayerForm = ({ addPlayer }) => {
const [name, setName] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
addPlayer(name);
setName("");
};
return (
<Form onSubmit={handleSubmit}>
<Form.Group controlId="name">
<Form.Label>Name</Form.Label>
<Form.Control
required
type="text"
value={name}
placeholder="Normal text"
onChange={(e) => setName(e.target.value)}
/>
</Form.Group>
<Button type="submit">Add Player</Button>
</Form>
);
};
export default PlayerForm;

然后，数据进入PlayerList组件：

import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";
import { Table, Form } from "react-bootstrap";
import PlayerForm from "./PlayerForm";
import styled from "styled-components";
const StyledInput = styled(Form.Control)`
padding: 2px 5px;
width: 60px;
height: 30px;
`;
const PlayerList = () => {
const [players, setPlayers] = useState([
{ name: "Harry Kane", country: "England", id: 1, goals: 0, percentage: 0 },
{
name: "Marcus Rashford",
country: "England",
id: 2,
goals: 0,
percentage: 0,
},
]);
const addPlayer = (name) => {
setPlayers([
...players,
{ name: name, id: uuidv4(), country: "England", goals: 0, percentage: 0 },
]);
};
return (
<div>
<Table>
<thead>
<tr>
<th>Name</th>
<th>Total Goals</th>
<th>Goal Percentage</th>
</tr>
</thead>
<tbody>
{players.map((player) => (
<tr key={player.id}>
<td>{player.name}</td>
<td>
<Form>
<Form.Group controlId="goals">
<StyledInput
size="sm"
required
type="number"
defaultValue={player.goals}
step={1}
className="smaller-input"
min="0"
/>
</Form.Group>
</Form>
</td>
<td>
<Form>
<Form.Group controlId="goals">
<StyledInput
size="sm"
required
type="number"
defaultValue={player.percentage}
step={1}
className="smaller-input"
min="0"
/>
</Form.Group>
</Form>
</td>
</tr>
))}
</tbody>
</Table>
<PlayerForm addPlayer={addPlayer} />
</div>
);
};
export default PlayerList;

现在，我希望能够在将任何给定的玩家添加到Table之后删除它们。我不确定除了构建一个功能之外如何继续

const removePlayer =() =>{
}

有人能帮我吗？

Answer 1

首先，您必须将玩家id发送到函数，然后过滤掉该玩家的

const removePlayer = (playerId) => {
setPlayer(player.filter(p => p.id !== playerId));
}