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

Question

我是 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，其中包含正在运行的代码

有人可以帮帮我吗？

Answer 1

这是一种解决方案。 JSBin here

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

Answer 2

你做错了一些事情。您需要了解什么是状态以及如何与之交互。当状态发生变化时，您的渲染函数会再次被调用，它允许您根据当前状态进行动态渲染。

首先，用你想要的初始化你的状态（在这里，我可以只放置 rowsToDisplay，但我想你也希望能够更新你的汽车）。

您应该将 this 绑定到您的函数 showMore，这样当它被调用时，“this”指的是您的组件。

OnClick，会调用showMore；该功能更新您的状态。通过更新它，将再次调用 render （请记住，您的状态调用中​​的更改会再次使用您的新值渲​​染）。这应该是您更新视图的唯一方法。

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

    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" },
    ],    
    rowsToDisplay : 4};
    this.showMore = this.showMore.bind(this);
  }

  showMore() {
    let carLength = this.state.cars.length;
    this.setState({rowsToDisplay:carLength});
    // 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.state.cars.slice(0,this.state.rowsToDisplay).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'));

请随意提问，但请先阅读文档： https://facebook.github.io/react/docs/state-and-lifecycle.html

Answer 3

class Application extends React.Component {
  constructor() {
    super()
    this.state = {
      loadMore: false
    }
    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"
   this.setState({loadMore: true})
  }

  render() {
    const loadCount = this.state.loadMore ? this.cars.length : 3;
    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,loadCount).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'));

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

使用 this.setState() 重新渲染组件！