react实现简单品牌管理列表
时间: 2023-08-12 18:01:53 浏览: 55
要实现一个简单的品牌管理列表,你可以使用React来建前端界面。下面是一个简单的示例代码,演示如何使用React来实现品牌管理列表:
```jsx
import React, { useState } from 'react';
function BrandList() {
const [brands, setBrands] = useState([]);
const handleAddBrand = () => {
const brandName = prompt('请输入品牌名称');
if (brandName) {
const newBrand = { id: Date.now(), name: brandName };
setBrands([...brands, newBrand]);
}
};
const handleDeleteBrand = (id) => {
const updatedBrands = brands.filter(brand => brand.id !== id);
setBrands(updatedBrands);
};
return (
<div>
<h2>品牌列表</h2>
<button onClick={handleAddBrand}>添加品牌</button>
<ul>
{brands.map(brand => (
<li key={brand.id}>
{brand.name}
<button onClick={() => handleDeleteBrand(brand.id)}>删除</button>
</li>
))}
</ul>
</div>
);
}
export default BrandList;
```
在这个示例中,我们使用了React的函数组件和`useState`钩子来管理品牌列表的状态。在`brands`数组中存储品牌对象,每个对象有一个唯一的`id`和品牌名称`name`。
组件渲染时,会展示一个标题、一个添加品牌的按钮和一个品牌列表。点击添加品牌按钮时,会弹出一个对话框要求输入品牌名称,然后将新品牌添加到`brands`数组中。每个品牌都会显示在列表中,并且每个品牌后面有一个删除按钮,点击按钮会从列表中删除该品牌。
这只是一个简单的示例,你可以根据自己的需求进行扩展和修改。希望能对你有所帮助!