reactjs - 按类型=范围输入的默认值

Question

我有一个输入，type=range它的值min,max和defaultvalue将由 {this.renderMinTotal()}and设置{this.renderMaxTotal()}，正如你可以看到的值defaultvalue是 的输出，{this.renderMaxTotal()}但是输入的拇指看起来是 的值，而的值 defaultvalue是 和并且是正确的。输入的输出：{this.renderMinTotal()}defaultvalue{this.renderMaxTotal()}inspectorminmaxdefaultvalueinspector

<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'))

编辑代码：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      library: 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 { data } = this.state;
    let library = data;
    library = _.chunk(library);
    this.setState({
      library,

    });
  };

  // handle per page
  handlePerPage = evt =>
    this.setState(
      {
        perPage: evt.target.value
      },
      () => this.reorganiseLibrary()
    );

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

ReactDOM.render(<App />, document.getElementById('Result'))

标签： reactjs