react如何遍历一个数组对象并利用数据写一个全选与反选,再写一个可加减计数器(最低数量为0) 并利用数量和单价响应式计算总价 ( 中文回答)
时间: 2024-01-23 16:04:32 浏览: 126
react 计数例子
首先,我们可以使用map函数遍历数组对象,然后将每个对象的选中状态和数量作为对象属性存储在state中。实现全选与反选的方法是,当全选按钮被点击时,遍历数组对象,将每个对象的选中状态修改为true,当反选按钮被点击时,遍历数组对象,将每个对象的选中状态取反。
接下来,我们可以使用input元素实现可加减计数器。在增加和减少数量时,需要判断当前数量是否小于等于0,如果小于等于0则将数量设置为0。同时,每次修改数量时,需要重新计算总价,可以使用计算属性实现。
下面是代码示例:
```javascript
import React, { useState, useMemo } from 'react';
const Cart = () => {
const [items, setItems] = useState([
{ id: 1, name: '商品1', price: 10, count: 2, selected: true },
{ id: 2, name: '商品2', price: 20, count: 3, selected: false },
{ id: 3, name: '商品3', price: 30, count: 1, selected: true },
]);
const handleSelectAll = () => {
const newItems = items.map((item) => ({ ...item, selected: true }));
setItems(newItems);
};
const handleSelectReverse = () => {
const newItems = items.map((item) => ({ ...item, selected: !item.selected }));
setItems(newItems);
};
const handleCountChange = (id, count) => {
const newItems = items.map((item) => {
if (item.id === id) {
return { ...item, count: count <= 0 ? 0 : count };
}
return item;
});
setItems(newItems);
};
const totalPrice = useMemo(() => {
return items.reduce((total, item) => {
if (item.selected) {
return total + item.count * item.price;
}
return total;
}, 0);
}, [items]);
return (
<div>
<table>
<thead>
<tr>
<th>
<input type="checkbox" onClick={handleSelectAll} />
</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{items.map((item) => (
<tr key={item.id}>
<td>
<input type="checkbox" checked={item.selected} onChange={() => {}} />
</td>
<td>{item.name}</td>
<td>{item.price}</td>
<td>
<button onClick={() => handleCountChange(item.id, item.count - 1)}>-</button>
<span>{item.count}</span>
<button onClick={() => handleCountChange(item.id, item.count + 1)}>+</button>
</td>
<td>
<button>删除</button>
</td>
</tr>
))}
</tbody>
</table>
<div>总价:{totalPrice}</div>
<button onClick={handleSelectReverse}>反选</button>
</div>
);
};
export default Cart;
```
在上面的代码中,我们使用了useState和useMemo两个Hooks,useState用于存储状态,useMemo用于计算总价。在handleCountChange方法中,我们使用了map函数修改了state中的数据,这里需要注意不能直接修改state中的数据,而是要创建一个新的对象进行修改,否则会导致组件不会重新渲染。
阅读全文