按类型=范围输入的DefaultValue

Question

我有一个type=range输入，min，max和defaultvalue的值将由{this.renderMinTotal()}和{this.renderMaxTotal()}设置，如您所见，defaultvalue的值是{this.renderMaxTotal()}的输出，但是输入的拇指看起来defaultvalue的值是{this.renderMinTotal()}而{{1}的值}是defaultvalue，在{this.renderMaxTotal()}中inspector，min和max的值是正确的。 defaultvalue中输入的输出：

inspector

它必须是这样的： ============ [] 看起来像这样： [] =============

<input type="range" min="17386000" max="178124000" step="1000" class="multirange" value="178124000">

修改后的代码：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      library: null,
      perPage: 20,
      currentPage: 1,
      maxPage: null
    };
  }
  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 { perPage, data } = this.state;
    let library = data;
    library = _.chunk(library, perPage);
    this.setState({
      library,
      currentPage: 1,
      maxPage: library.length === 0 ? 1 : library.length
    });
  };

  // Previous Page
  previousPage = event => {
    this.setState({
      currentPage: this.state.currentPage - 1
    });
  };

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

  // 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">NoResult</div>;
    }

    return library[currentPage - 1]
      .sort((a, b) => a.total - b.total)
      .map((item, i) => (
        <div className="item">
          <span>{item._id.value} </span>
        </div>
      ));
  };

  renderMinTotal = () => {
    const { library } = this.state;
    if (!library || (library && library.length === 0)) {
      return "";
    }
    return library.reduce((acc, lib) => {
      const libMin = Math.min(...lib.map(item => item.totalCom));
      return acc === undefined ? libMin : libMin < acc ? libMin : acc;
    }, undefined);
  };

  renderMaxTotal = () => {
    const { library } = this.state;

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

  render() {
    const { library, currentPage, perPage, maxPage } = this.state;
    return (
      <div>
        <div>
          <input
            type="range"
            min={this.renderMinTotal()}
            max={this.renderMaxTotal()}
            defaultValue={this.renderMaxTotal()}
            step="1000"
            className="multirange"
          />
        </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'))