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

Question

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?

Answer 1

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

Answer 2

You do some things wrong. You need to understand what a state is and how react interact with it. When a state change, your render function is called again, it allow you to have dynamic rendering based on your current state.

First, initialize your state with what you want (here, I could have put only rowsToDisplay, but I guess you want to be able to update your cars as well).

You should bind this to your function showMore so when it's called, it get that "this" refers to your Component.

OnClick, showMore will be called; the function update your state. By updating it, render will be called again (remember that a change in your state call render again with your new values). This should be the only way for you to update the view.

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

Feel free to ask questions, but please read the doc first : 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" /> 

use this.setState() to reRender the component!