如何在react中按价格过滤产品？

import React, { Component } from 'react';

class ProductList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [], // 产品列表数据
      priceFilter: null, // 价格过滤器
    };
  }

  componentDidMount() {
    // 获取产品列表数据，可以通过API请求或者其他方式获取
    // 将获取到的数据更新到state中的products
    // this.setState({ products: fetchedProducts });
  }

  handlePriceFilterChange = (minPrice, maxPrice) => {
    // 更新价格过滤器的值
    this.setState({ priceFilter: { min: minPrice, max: maxPrice } });
  };

  render() {
    const { products, priceFilter } = this.state;

    // 根据价格过滤器过滤产品列表
    const filteredProducts = products.filter((product) => {
      if (!priceFilter) {
        return true; // 如果价格过滤器为空，则显示所有产品
      }
      const { min, max } = priceFilter;
      return product.price >= min && product.price <= max;
    });

    return (
      <div>
        {/* 价格过滤器UI组件 */}
        <PriceFilter onChange={this.handlePriceFilterChange} />

        {/* 显示符合条件的产品列表 */}
        {filteredProducts.map((product) => (
          <Product key={product.id} product={product} />
        ))}
      </div>
    );
  }
}

class PriceFilter extends Component {
  handleMinPriceChange = (event) => {
    const minPrice = event.target.value;
    // 更新最小价格
  };

  handleMaxPriceChange = (event) => {
    const maxPrice = event.target.value;
    // 更新最大价格
  };

  render() {
    return (
      <div>
        <input type="number" onChange={this.handleMinPriceChange} />
        <input type="number" onChange={this.handleMaxPriceChange} />
      </div>
    );
  }
}

class Product extends Component {
  render() {
    const { product } = this.props;
    return (
      <div>
        <h3>{product.name}</h3>
        <p>{product.price}</p>
      </div>
    );
  }
}

export default ProductList;