react 点击价格区间 展示商品

要实现点击价格区间展示商品，可以在 `PriceCategory` 组件中添加一个点击事件，当用户点击价格分类时，触发展示商品的操作。具体实现步骤如下：

1. 在 `PriceCategory` 组件中添加一个 `onClick` 事件处理函数。
2. 在事件处理函数中，调用父组件传递过来的 `onCategoryClick` 回调函数，并将当前价格分类作为参数传递给它。
3. 在父组件中定义一个 `onCategoryClick` 回调函数，接受价格分类作为参数。
4. 在 `onCategoryClick` 回调函数中根据价格分类，展示对应的商品。

代码示例：

// 商品列表组件
function ProductList({ products }) {
  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>
          <p>{product.name}</p>
          <p>Price: {product.price}</p>
        </div>
      ))}
    </div>
  );
}

// 价格分类组件
function PriceCategory({ price, onCategoryClick }) {
  let category;

  if (price < 50) {
    category = "Cheap";
  } else if (price < 100) {
    category = "Moderate";
  } else if (price < 200) {
    category = "Expensive";
  } else {
    category = "Luxury";
  }

  return (
    <div onClick={() => onCategoryClick(category)}>
      <p>Price: {price}</p>
      <p>Category: {category}</p>
    </div>
  );
}

// 父组件
function App() {
  const products = [
    { id: 1, name: "Product 1", price: 50 },
    { id: 2, name: "Product 2", price: 80 },
    { id: 3, name: "Product 3", price: 120 },
    { id: 4, name: "Product 4", price: 250 },
  ];

  const [selectedCategory, setSelectedCategory] = useState(null);

  const onCategoryClick = (category) => {
    setSelectedCategory(category);
  };

  const filteredProducts = selectedCategory
    ? products.filter((product) =>
        product.price < getPriceRange(selectedCategory)[1] &&
        product.price >= getPriceRange(selectedCategory)[0]
      )
    : products;

  const getPriceRange = (category) => {
    switch (category) {
      case "Cheap":
        return [0, 50];
      case "Moderate":
        return [50, 100];
      case "Expensive":
        return [100, 200];
      case "Luxury":
        return [200, Infinity];
      default:
        return [0, Infinity];
    }
  };

  return (
    <div>
      <h2>Products</h2>
      <div>
        {["Cheap", "Moderate", "Expensive", "Luxury"].map((category) => (
          <PriceCategory
            key={category}
            price={getPriceRange(category)[0]}
            onCategoryClick={onCategoryClick}
          />
        ))}
      </div>
      <ProductList products={filteredProducts} />
    </div>
  );
}

在上述代码中，我们在 `PriceCategory` 组件中添加了一个 `onClick` 事件处理函数，当用户点击价格分类时，会调用父组件传递过来的 `onCategoryClick` 回调函数，并将当前价格分类作为参数传递给它。在父组件中，我们根据当前选中的价格分类过滤商品列表，然后将过滤后的商品列表传递给 `ProductList` 组件进行展示。