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

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（）重新呈現的組件！

Answer 3

你做錯了一些事情。你需要了解一個狀態是什麼以及如何與它進行交互。當狀態發生變化時，再次調用渲染函數，它允許您根據當前狀態進行動態渲染。首先，用你想要的東西初始化你的狀態（在這裏，我可以只放置rowsToDisplay，但我想你也希望能夠更新你的汽車）。

你應該將它與你的函數showMore綁定，所以當它被調用時，它會得到「this」引用你的Component。

OnClick，showMore將被調用;該函數更新你的狀態。通過更新它，渲染將再次被調用（請記住，狀態調用中​​的更改會使用新值再次渲染）。這應該是您更新視圖的唯一方法。

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