在reactjs中通过两个输入type =“ range”创建一个滑块

Question

我有一个fetch()请求调用的JSON文件。我有两个type="range"输入。我想将两者合并。 像this之类的东西。

我想制作一个double滑块，但是如果我将两个元素放在另一个顶部，则只有顶部的一个接受鼠标单击。我不希望在React中使用任何外部库作为滑块或两个处理程序之间的空间，这些颜色是彩色的。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      library: null,
      librarySecond: null,
      perPage: 20,
      currentPage: 1,
      maxPage: null,
      filterTotalF: "",
      filterTotalS: "",
      rangevalTotalF: "",
      rangevalTotalS: ""
    };
  }
  componentDidMount() {
    fetch("/json,bc", {
      method: "get"
    })
      .then(response => response.text())
      .then(text => {
        let Maindata = JSON.parse(text.replace(/\'/g, '"'));
        this.setState(
          state => ({
            ...state,
            data: Maindata
          }),
          () => {
            this.reorganiseLibrary();
          }
        );
      })
      .catch(error => console.error(error));
  }

  reorganiseLibrary = () => {
    const { filterTotalF, filterTotalS, perPage, data } = this.state;
    let library = data;
    let librarySecond = data;
    librarySecond = _.chunk(librarySecond, perPage);
    this.setState({
      librarySecond,
      currentPage: 1,
      maxPage: librarySecond.length === 0 ? 1 : librarySecond.length
    });
    let defaultFilterF = null;
    defaultFilterF = filterTotalF
      ? filterTotalF
      : this.renderMinFilter(librarySecond);
    let defaultFilterS = null;
    defaultFilterS = filterTotalS
      ? filterTotalS
      : this.renderMaxFilter(librarySecond);
    if (defaultFilterF !== "" && defaultFilterS !== "") {
      library = library.filter(
        item =>
          item.totalCom >= defaultFilterF && item.totalCom <= defaultFilterS
      );
    }
    if (filterExitTimeDepF !== "" && filterExitTimeDepS !== "") {
      library = library.filter(
        item =>
          this.rendershowexittimeDep(
            item.info.departureinformation.ticketinfooo.exitinfo.showexittime
          ) >= filterExitTimeDepF &&
          this.rendershowexittimeDep(
            item.info.departureinformation.ticketinfooo.exitinfo.showexittime
          ) <= filterExitTimeDepS
      );
    }
    if (filterExitTimeDesF !== "" && filterExitTimeDesS !== "") {
      library = library.filter(
        item =>
          this.rendershowexittimeDes(
            item.info.returninformation.ticketinfooo.exitinfo.showexittime
          ) >= filterExitTimeDesF &&
          this.rendershowexittimeDes(
            item.info.returninformation.ticketinfooo.exitinfo.showexittime
          ) <= filterExitTimeDesS
      );
    }
    library = _.chunk(library, perPage);
    this.setState({
      library,
      currentPage: 1,
      maxPage: library.length === 0 ? 1 : library.length
    });
  };

  renderMinFilter = librarySecond => {
    return librarySecond.reduce((acc, lib) => {
      const libMin = Math.min(...lib.map(item => item.totalCom));
      return acc === undefined ? libMin : libMin < acc ? libMin : acc;
    }, undefined);
  };
  renderMaxFilter = librarySecond => {
    return librarySecond.reduce((acc, lib) => {
      const libMax = Math.max(...lib.map(item => item.totalCom));
      return libMax > acc ? libMax : acc;
    }, 0);
  };
  // Previous Page
  previousPage = event => {
    this.handleClick(event);
    this.setState({
      currentPage: this.state.currentPage - 1
    });
  };

  // Next Page
  nextPage = event => {
    this.handleClick(event);
    this.setState({
      currentPage: this.state.currentPage + 1
    });
  };

  // handle filter
  handleFilterTotal = evt => {
    let value = evt.target.value;
    let key = evt.target.getAttribute("data-key");
    if (key == "1") {
      this.setState(
        {
          filterTotalF: evt.target.value,
          rangevalTotalF: evt.target.value
        },
        () => {
          this.reorganiseLibrary();
        }
      );
    } else if (key == "2") {
      this.setState(
        {
          filterTotalS: evt.target.value,
          rangevalTotalS: evt.target.value
        },
        () => {
          this.reorganiseLibrary();
        }
      );
    }
  };
  // handle per page
  handlePerPage = evt =>
    this.setState(
      {
        perPage: evt.target.value
      },
      () => this.reorganiseLibrary()
    );

  // handle render of library
  renderLibrary = () => {
    const { library, currentPage } = this.state;

    if (!library || (library && library.length === 0)) {
      return (
        <div className="nodata">
          <div className="tltnodata">برای جستجوی شما نتیجه ای یافت نشد!</div>
          <div className="textnodata">
            شما می توانید با انجام مجدد عملیات جستجو,نتیجه مورد نظر خود را
            بیابید
          </div>
        </div>
      );
    }
    return library[currentPage - 1]
      .sort((a, b) => a.total - b.total)
      .map((item, i) => (
        <div className="item">
          <span>{item.id}</span>
        </div>
      ));
  };
  renderMinTotal = () => {
    const { librarySecond } = this.state;
    if (!librarySecond || (librarySecond && librarySecond.length === 0)) {
      return "";
    }
    return librarySecond.reduce((acc, lib) => {
      const libMin = Math.min(...lib.map(item => item.totalCom));
      return acc === undefined ? libMin : libMin < acc ? libMin : acc;
    }, undefined);
  };
  renderMaxTotal = () => {
    const { librarySecond } = this.state;

    if (!librarySecond || (librarySecond && librarySecond.length === 0)) {
      return "";
    }
    return librarySecond.reduce((acc, lib) => {
      const libMax = Math.max(...lib.map(item => item.totalCom));
      return libMax > acc ? libMax : acc;
    }, 0);
  };

  render() {
    const {
      library,
      currentPage,
      perPage,
      maxPage,
      rangevalTotalF,
      rangevalTotalS,
      librarySecond
    } = this.state;
    let defaultRangeF = null;
    defaultRangeF = rangevalTotalF ? (
      <span>{rangevalTotalF}</span>
    ) : (
      <span>{this.renderMinTotal()}</span>
    );
    let defaultRangeS = null;
    defaultRangeS = rangevalTotalS ? (
      <span>{rangevalTotalS}</span>
    ) : (
      <span>{this.renderMaxTotal()}</span>
    );
    return (
      <div>
        <div className="filter-box">
          <div className="wrapper">
            <input
              type="range"
              min={this.renderMinTotal()}
              max={this.renderMaxTotal()}
              defaultValue={this.renderMaxTotal()}
              step="1000"
              onChange={this.handleFilterTotal}
              data-key="2"
              className="exitTimeSecond"
            />
            <div className="rangevalSecond">{defaultRangeS}</div>
          </div>
          <div className="wrapper">
            <input
              type="range"
              min={this.renderMinTotal()}
              max={this.renderMaxTotal()}
              defaultValue={this.renderMinTotal()}
              step="1000"
              onChange={this.handleFilterTotal}
              data-key="1"
              className="exitTimeFirst"
            />
            <div className="rangevalFirst">{defaultRangeF}</div>
          </div>
        </div>
        {this.renderLibrary()}
        <ul id="page-numbers">
          <li className="nexprevPage">
            {currentPage !== 1 && (
              <button onClick={this.previousPage}>
                <span className="fa-backward" />
              </button>
            )}
          </li>
          <li className="controlsPage active">{this.state.currentPage}</li>
          <li className="restControls">...</li>
          <li className="controlsPage">{this.state.maxPage}</li>
          <li className="nexprevPage">
            {currentPage < maxPage && (
              <button onClick={this.nextPage}>
                <span className="fa-forward" />
              </button>
            )}
          </li>
        </ul>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("Result"));