ReactJS如何添加show more/show less按钮

Question

我是React的新手,我想在我的应用程序中添加一个简单的"显示更多"按钮.我有一个数据数组,我想在默认情况下显示3个条目.当用户单击时show more,应呈现其余数据,Button应将文本更改为show less.我不确定该怎么做.

这是我到目前为止所得到的:

class Application extends React.Component {
  constructor() {
    super()

    this.cars = [
     { "name" : "Audi", "country" : "Germany"},
     { "name" : "BMW", "country" : "Germany" },
     { "name" : "Chevrolet", "country" : "USA" },
     { "name" : "Citroen", "country" : "France" },
     { "name" : "Hyundai", "country" : "South Korea" },
     { "name" : "Mercedes-Benz", "country" : "Germany" },
     { "name" : "Renault", "country" : "France" },
     { "name" : "Seat", "country" : "Spain" },
   ]

   this.isLoaded = false

  }

  showMore() {
   // show more entries
   // switch to "show less"
  }

  render() {
    return <div className="container">
     <h3>Click show more to see more data</h3>
     <div className="row">
       <h3>List of Cars</h3>
       <ul>
         {this.cars.slice(0,3).map((car, i) => <li key={i}>{car.name} - {car.country}</li>)}
       </ul>
     </div>
     <p>
      <a className="btn btn-primary" onClick={this.showMore()}>Show more</a>.
     </p>
   </div>;
  }
}

React.render(<Application />, document.getElementById('app'));

这是一个带有代码的JSBin

有人可以帮我吗？

Answer 1

这是一个解决方案.JSBin在这里

首先,将所有组件数据放入其中state.

this.state = {
  cars: [
    { "name" : "Audi", "country" : "Germany"},
    { "name" : "BMW", "country" : "Germany" },
    { "name" : "Chevrolet", "country" : "USA" },
    { "name" : "Citroen", "country" : "France" },
    { "name" : "Hyundai", "country" : "South Korea" },
    { "name" : "Mercedes-Benz", "country" : "Germany" },
    { "name" : "Renault", "country" : "France" },
    { "name" : "Seat", "country" : "Spain" },
  ],
  itemsToShow: 3,
  expanded: false
}

this.showMore = this.showMore.bind(this);

让我们itemsToShow用来知道未展开时要显示的项目数.我们可以使用expanded变量根据用户的操作更改按钮文本.我们还绑定showMore到此组件,以便按钮知道单击时要调用的组件的方法.

在我们的渲染中,让我们改变一些事情,就像这样

<ul>
  {this.state.cars.slice(0, this.state.itemsToShow).map((car, i) => 
    <li key={i}>{car.name} - {car.country}</li>
  )}
</ul>

我们将从0渲染到itemsToShow我们有多少.然后我们可以根据expanded值来改变按钮的文本

<a className="btn btn-primary" onClick={this.showMore}>
  {this.state.expanded ? (
    <span>Show less</span>
  ) : (
    <span>Show more</span>
  )}
</a>.

最后,让我们编写showMore实际更改值的方法itemsToShow.

showMore() {
  this.state.itemsToShow === 3 ? (
    this.setState({ itemsToShow: this.state.cars.length, expanded: true })
  ) : (
    this.setState({ itemsToShow: 3, expanded: false })
  )
}