react实现价格的加减和全选反选计算选中数量

你可以使用React的状态管理来实现价格的加减和全选反选计算选中数量。下面是一个简单的实现示例：

import React, { useState } from "react";

function PriceCalculator() {
  const [items, setItems] = useState([
    { id: 1, name: "Item 1", price: 10, checked: false },
    { id: 2, name: "Item 2", price: 20, checked: false },
    { id: 3, name: "Item 3", price: 30, checked: false }
  ]);
  const [selectAll, setSelectAll] = useState(false);

  const handleItemChange = (item) => {
    const newItems = [...items];
    const index = newItems.findIndex((i) => i.id === item.id);
    newItems[index] = { ...newItems[index], checked: !newItems[index].checked };
    setItems(newItems);
  };

  const handleSelectAllChange = () => {
    const newItems = [...items];
    newItems.forEach((item) => (item.checked = !selectAll));
    setItems(newItems);
    setSelectAll(!selectAll);
  };

  const getTotalPrice = () => {
    const totalPrice = items.reduce((acc, item) => {
      if (item.checked) {
        return acc + item.price;
      }
      return acc;
    }, 0);
    return totalPrice;
  };

  const getSelectedCount = () => {
    const selectedCount = items.reduce((acc, item) => {
      if (item.checked) {
        return acc + 1;
      }
      return acc;
    }, 0);
    return selectedCount;
  };

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>
              <input
                type="checkbox"
                checked={selectAll}
                onChange={handleSelectAllChange}
              />
            </th>
            <th>Item Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          {items.map((item) => (
            <tr key={item.id}>
              <td>
                <input
                  type="checkbox"
                  checked={item.checked}
                  onChange={() => handleItemChange(item)}
                />
              </td>
              <td>{item.name}</td>
              <td>${item.price}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <div>Total Price: ${getTotalPrice()}</div>
      <div>Selected Count: {getSelectedCount()}</div>
    </div>
  );
}

在这个实现中，我们使用了React的`useState`来管理状态。`items`数组包含每个项目的数据，包括`id`、`name`、`price`和`checked`属性。`selectAll`状态表示是否全选。

`handleItemChange`函数用于处理单个项目的选择更改。它创建一个新的`items`数组，并将更改后的项目替换原始数组中的项目。最后，它将新的`items`数组设置为状态。

`handleSelectAllChange`函数用于处理全选/反选更改。它创建一个新的`items`数组，并将`checked`属性设置为`!selectAll`。最后，它将新的`items`数组和新的`selectAll`状态设置为状态。

`getTotalPrice`函数使用`reduce`方法计算所有选中项目的总价。

`getSelectedCount`函数使用`reduce`方法计算选中的项目数。

在组件的返回值中，我们使用`<table>`元素显示项目列表，并使用`<input>`元素来显示选择框。`<div>`元素用于显示总价和选中的项目数。

此实现仅用于演示目的，您需要根据自己的需求进行调整和修改。