ReactJS 如何添加显示更多/显示更少按钮 [英] ReactJS How to add a show more/show less button

问题描述

我是 React 的新手，我想在我的应用程序中添加一个简单的显示更多"按钮.我有一个包含数据的数组，我想在其中显示 3 个条目作为默认值.当用户点击 show more 时，其余的数据应该被渲染，并且 Button 应该将文本更改为 show less.我不太确定该怎么做.

这是我目前得到的:

class Application 扩展 React.Component {构造函数(){极好的()this.cars = [{名称":奥迪"，国家":德国"}，{名称":宝马"，国家":德国"}，{名称":雪佛兰"，国家":美国"}，{名称":雪铁龙"，国家":法国"}，{ "name" : "现代", "country" : "韩国" },{ "name" : "Mercedes-Benz", "country" : "Germany" },{名称":雷诺"，国家":法国"}，{ "name" : "Seat", "country" : "西班牙" },]this.isLoaded = false}展示更多() {//显示更多条目//切换到少显示"}使成为() {返回 
<h3>点击显示更多查看更多数据</h3><div className="row"><h3>汽车列表</h3><ul>{this.cars.slice(0,3).map((car, i) => <li key={i}>{car.name} - {car.country}</li>)}
<p><a className="btn btn-primary" onClick={this.showMore()}>显示更多</a>.</p>

;}}React.render(, document.getElementById('app'));

这是一个 JSBin 代码正在运行

有人可以帮我吗?

解决方案

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

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

this.state = {汽车: [{名称":奥迪"，国家":德国"}，{名称":宝马"，国家":德国"}，{名称":雪佛兰"，国家":美国"}，{名称":雪铁龙"，国家":法国"}，{ "name" : "现代", "country" : "韩国" },{ "name" : "Mercedes-Benz", "country" : "Germany" },{名称":雷诺"，国家":法国"}，{ "name" : "Seat", "country" : "西班牙" },],itemsToShow: 3,展开:假}this.showMore = this.showMore.bind(this);

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

在我们的渲染中，让我们改变一些东西，就像这样

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

我们将从 0 渲染到任意数量的 itemsToShow.然后我们可以像这样根据 expanded 值更改按钮的文本

{this.state.expanded ?(<span>显示更少</span>) : (<span>显示更多</span>)}</a>.

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

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

I'm new to React and I want to add a simple "Show more" button to my Application. I have an array with data, where I want to show 3 entries as a default. When a user clicks on show more, the rest of the data should be rendered, and the Button should change the text to show less. I'm not exactly sure how to do it.

This is what I got so far:

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

Here is a JSBin with the code in action

Can someone help me out?

解决方案

Here is one solution. JSBin here

First, put all of your component data into its 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);

Let's use itemsToShow to know how many items to show when not expanded. We can use an expanded variable to change the button text based on the user's action. We're also binding showMore to this component so that the button knows what component's method to call when clicked.

In our render, let's change a few things, like so

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

We're going to render from 0 to however many itemsToShow we have. Then we can change the button's text depending on the expanded value like so

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

Finally, let's write the showMore method that actually changes the value of itemsToShow.

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

这篇关于ReactJS 如何添加显示更多/显示更少按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！