如何在 ReactJS 中打开 Order答案

【问题标题】：How to toggle on Order in ReactJS如何在 ReactJS 中打开 Order
【发布时间】：2019-08-12 11:30:32
【问题描述】：

我正在对asc 和desc 进行排序。如果用户第一次点击我想用name asc 更新它，我想制定逻辑，当用户第二次点击我想用name desc 更新它时。当用户点击时，它会以同样的方式重复。

代码

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

【问题讨论】：

Repeat 表示您想在第三次点击时将排序顺序更改为 Asc？
@TRomesh ，是的，感谢您的评论

标签： javascript reactjs sorting ecmascript-6 es6-promise

【解决方案1】：

在您的组件状态中定义order 并将其初始化为true。

constructor(props){
        super(props);
        this.state={
          order: true, 
          sortedData: ''
        }
       }
       
        getSortedData =() => {
            
            if (this.state.order) {
              this.setState({order: false, sortedData: 'name desc' }, () => {
                this.getData();
              });
            } else {
              this.setState({order: true, sortedData: 'name asc' }, () => {
                this.getData();
              });
            }
        }

【讨论】：

【解决方案2】：

这是个好问题。我认为你可以这样做。

class App extends React.Component {
  state = {
    names: ['Ane', 'Robert', 'Jane'],
    asc: true,
  };
  
  toggleOrder = () => {
    this.setState({
      names: this.state.asc
        ? this.state.names.sort()
        : this.state.names.reverse(),
      asc: !this.state.asc,
    });
  }
  
  render() {
    const { names, asc } = this.state;
    
    return (
      <div>
        <button
          onClick={this.toggleOrder}
        >
          {
            asc ? 'des' : 'asc'
          }
        </button>
        <ul>
          {
            names.map(name => (
              <li>{name}</li>
            ))      
          }
        </ul>
      </div>
    );
  }
}


ReactDOM.render(
  <App />,
  document.querySelector('#app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

【讨论】：

【解决方案3】：

你可以根据你的状态来切换。

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

所以这个将按照以下方式工作：

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

【讨论】：

谢谢！它正在工作。我想要更多，实际上我想在用户在最后一页时将状态数据重置为初始值（因为我正在使用分页）并希望在asc 到desc 或desc 到asc 中排序。例如，如果用户单击 asc 在页面中排序 ` 并且用户现在回到最后一页，用户想要在 desc 中排序，所以我想重置状态值，因为我在每次点击时都会增加状态值
@Andrew 为什么要增加值？抱歉，我没有得到那部分。
实际上，我正在使用环回过滤器进行分页。在每次单击下一步时，我都会增加值。但我想如果用户在第 3 页或最后一页。如果用户单击进行排序，我想将值保留为我在状态中声明的初始值
@Andrew 是服务器端渲染吗？就像呈现东西服务器端的 API？在这种情况下，您能否让 API 返回排序后的逻辑？只是想知道这会更好，因为你有一些分页。
是的，实际上每次点击我都会通过分页获取有限的数据，所以我想知道是否应该清空状态值