创建一个React组件,显示一个列表,其中每个列表项都是一个对象的属性,以及一个删除按钮,用于从列表中删除项目
时间: 2024-01-15 17:05:37 浏览: 28
好的,以下是一个简单的React组件,用于显示一个列表和删除按钮:
```jsx
import React, { useState } from 'react';
function ListItem(props) {
return (
<li>
{props.item.name} - {props.item.description}
<button onClick={() => props.onDelete(props.item)}>删除</button>
</li>
);
}
function List(props) {
const [items, setItems] = useState(props.items);
function handleDelete(item) {
const updatedItems = items.filter(i => i !== item);
setItems(updatedItems);
}
return (
<ul>
{items.map(item => (
<ListItem key={item.id} item={item} onDelete={handleDelete} />
))}
</ul>
);
}
export default List;
```
在这个组件中,我们首先定义了一个 `ListItem` 组件,它接收一个 `item` 对象和一个 `onDelete` 回调函数作为 props。这个组件将 `item` 对象的 `name` 和 `description` 属性渲染为文字,并创建一个删除按钮,当用户点击按钮时,会调用 `onDelete` 回调函数并将 `item` 作为参数传递给它。
接下来,我们定义了一个 `List` 组件,它接收一个 `items` 数组作为 props。在这个组件中,我们使用 `useState` hook 来声明一个名为 `items` 的 state 变量,并将其初始化为传递进来的 `items` 数组。
然后,我们定义了一个 `handleDelete` 函数,它接收一个 `item` 对象作为参数,并使用 `filter` 方法来从 `items` 数组中删除这个对象。最后,我们调用 `setItems` 函数来更新 `items` state 变量,使得组件重新渲染。
在 `List` 组件的返回值中,我们使用 `map` 方法遍历 `items` 数组,并为每个对象创建一个 `ListItem` 组件。我们将 `item` 对象作为 `ListItem` 的 `item` prop 传递给它,并将 `handleDelete` 函数作为 `onDelete` prop 传递给它。
这样,当用户点击任何一个 `ListItem` 组件的删除按钮时,它会调用 `handleDelete` 函数并删除相关的对象,然后更新 `items` state 变量,导致组件重新渲染并显示更新后的列表。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)