Question

我是React的新手，我想在我的应用程序中添加一个简单的“显示更多”按钮。我有一个数据数组，我想在默认情况下显示3个条目。当用户点击show more时，应呈现其余数据，而Button应将文本更改为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，但我想你也希望能够更新你的汽车）。

你应该将它绑定到你的函数showMore，所以当它被调用时，它会得到“this”指的是你的Component。

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

delete_by_query

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

Answer 3

＆＃13;

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

＆＃13;

<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" />

＆＃13;

＆＃13; 使用this.setState（）来重新调整组件！

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

3 个答案: