ReactJS 如何添加显示更多/显示更少按钮

我是 React 新手，我想向我的应用程序添加一个简单的“显示更多”按钮。我有一个包含数据的数组，我想在其中默认显示 3 个条目。当用户点击show more，应呈现其余数据，并且按钮应将文本更改为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 http://jsbin.com/bomuqitixo/1/edit?html,js,output代码正在运行

有人可以帮我吗？

这是一种解决方案。JSB在这里 http://jsbin.com/wowaluwipu/1/edit?html,js,output

首先，将所有组件数据放入其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 })
  )
}