如何在我的React应用程序中使滑块过滤页面上的项目？

Question

我的Slider无法正常工作，甚至无法移动和过滤网页上的数据。我已经尝试过使用localStorage，但这仅有助于移动滑块，但仍无法根据价格过滤结果。

这是我的App.js组件

import React, { Component } from "react";
import { items } from "../../data/data";
import CustSlider from "../CustSlider/CustSlider";
import ItemPage from "../ItemPage/ItemPage";


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      originCity: "",
      destCity: "",
      items: items
    };
    this.handleChangeSlider = this.handleChangeSlider.bind(this);
    this.filterByPrice = this.filterByPrice.bind(this);

    this.findByMatchingProperties = this.findByMatchingProperties.bind(this);

  }



  handleChangeSlider(obj) {
    this.setState({
      sliderRangeObj: obj
    });

    const objToMatch = {
      originCity: this.state.originCity,
      destCity: this.state.destCity
    };

    let filteredData = this.findByMatchingProperties(items, objToMatch);
    filteredData = filteredData.filter(this.filterByPrice);

    this.setState({
      items: filteredData
    });
  }

  filterByPrice(item) {
    return (
      item.price >= this.state.sliderRangeObj.lowerBound &&
      item.price <= this.state.sliderRangeObj.upperBound
    );
  }

  findByMatchingProperties(arrObj, matchingObj) {
    return arrObj.filter(function(entry) {
      return Object.keys(matchingObj).every(function(key) {
        return (
          entry[key].toUpperCase().indexOf(matchingObj[key].toUpperCase()) === 0
        );
      });
    });
  }

  render() {

    return (
      <div className="App">

        <div className="container">
          <div className="one-third column">


            <div>
              <div className="label">
                <label>
                  <h5>Refine Flight Search</h5>
                </label>
                <CustSlider onChange={this.handleChangeSlider} />
              </div>
            </div>

          </div>


            <main>
              <ItemPage
                items={this.state.items}

              />
            </main>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

这是我的custSlider.js组件

require("rc-slider/assets/index.css");

const React = require("react");
const Slider = require("rc-slider");
const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);

const Tooltip = require("rc-tooltip");
const Handle = Slider.Handle;
const style = { margin: 15 };

const handle = props => {
  const { value, dragging, index, ...restProps } = props;
  return (
    <Tooltip
      prefixCls="rc-slider-tooltip"
      overlay={value}
      visible={dragging}
      placement="top"
      key={index}
    >
      <Handle {...restProps} />
    </Tooltip>
  );
};

class CustSlider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lowerBound: 0,
      upperBound: 100,
      value: [0, 100]
    };
  }

  onLowerBoundChange = e => {
    this.setState({ lowerBound: +e.target.value });
  };

  onUpperBoundChange = e => {
    this.setState({ upperBound: +e.target.value });
  };

  onSliderChange = value => {
    if (typeof this.props.onChange === "function") {
      this.props.onChange({
        lowerBound: value[0] * 100,
        upperBound: value[1] * 100
      });
    }
    this.setState({
      value
    });
  };

  handleApply = () => {
    const { lowerBound, upperBound } = this.state;
    this.setState({ value: [lowerBound, upperBound] });
  };

  render() {
    return (
      <div style={style}>
        <Range
          allowCross={false}
          value={this.state.value}
          onChange={this.onSliderChange}
          tipFormatter={value => `${value * 100}`}
        />
      </div>
    );
  }
}

CustSlider.propTypes = {
  onChange: React.PropTypes.func
};

export default CustSlider;

这是我的ItemPage.js组件：-

import React from "react";
import Item from "../Item/Item";


function ItemPage({ items }) {
  let length = items.length;
  if (length > 0) {
    return (
      <ul className="ItemPage-items">
        {items.map(item => (
          <li key={item.id} className="ItemPage-item">
            <Item item={item}></Item>
          </li>
        ))}
      </ul>
    );
  } else {
    return (
      <ul className="ItemPage-items">
        <label>
          <h5>There are no flights available.</h5>
        </label>
      </ul>
    );
  }
}
ItemPage.propTypes = {
  items: React.PropTypes.array.isRequired
};

export default ItemPage;

最后这是我的Item.js组件：-

import React from 'react';


let Item = ({ item, children }) => (
  <div className="Item">
    <div className="Item-left">
        <h5>Rs. {item.price}</h5>
        <div>{item.name}</div>
        <div className="Item-price">{item.originCity} > {item.destinationCity} </div>
        <div className="Item-description">Depart: {item.departureDate}</div>
        <div className="Item-description">DepartTime: {item.departureTime}</div>
    </div>

    <div className="Item-right">
      <div className="Item-image" >
        <img src={logo} className="Item-logo" alt="logo" />
      </div>
      <button className="Item-book" onClick={item.onClickHandler} type="submit">
        Book this flightleft">

      </button>
      {children}
    </div>
  </div>
)

Item.onClickHandler =  (event) => {
  alert("Flight booked successfully :)")
  event.preventDefault();
}

Item.propTypes = {
  item: React.PropTypes.object.isRequired,
  children: React.PropTypes.node
};

export default Item;

这是我的示例data.js文件：-

let items = [
  {
    id: "0_0",
    name: "Flight_01",
    price: 8091.230258540607,
    originCity: "NY",
    destinationCity: "MO",
    departureDate: "17/5/2020",
    departureTime: "3:58"
  },
  {
    id: "83.962524313392_1",
    name: "Flight_11",
    price: 8997.002588420686,
    originCity: "OR",
    destinationCity: "AL",
    departureDate: "15/0/2020",
    departureTime: "9:20"
  },
  {
    id: "46.580959446171335_2",
    name: "Flight_21",
    price: 7502.454084946097,
    originCity: "NV",
    destinationCity: "NV",
    departureDate: "20/11/2020",
    departureTime: "16:0"
  }
];
export { items };