如何在ReactJS中打开Order [英] How to toggle on Order in ReactJS

问题描述

我正在按 asc 和 desc 进行排序.如果用户第一次单击我想用 name asc 更新它，我想做出逻辑，当用户单击第二次我想用 name desc 更新它.每当用户单击时，它都会重复相同的方式.

I am doing sorting in asc and desc. I want to make logic if User click first time I want to update it with name asc, when User click second time I want to update it with name desc. It will repeat same manner when ever user click.

代码

        class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

推荐答案

您可以根据自己的状态进行切换.

You can toggle based on what you have in the state.

getSortedData = () => {
  this.setState({
    sortedData: this.state.sortedData === "name asc" ? "name desc" : "name asc"
  }, () => {
    this.getData();
  });
};

所以这将以以下方式工作:

So this one will work on the following way:

sortedData = "name asc";
console.log(sortedData);
setInterval(function () {
  sortedData = sortedData === "name asc" ? "name desc" : "name asc";
  console.log(sortedData);
}, 500);

这篇关于如何在ReactJS中打开Order的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！