[英]ReactJS how to always show only certain number of array items
I want to display a certain number of items from an array and when the user clicks for example "show next" the next five items of the array will be visible, like items 6-10, where the items 0-5 will be hidden eg there should ALWAYS only be five items visible. 我想从数组中显示一定数量的项目,并且当用户单击“显示下一个”时,该数组的下五个项目将是可见的,例如项目6-10,其中项目0-5将被隐藏,例如应该总是只有五个项目可见。 How can I do that?
我怎样才能做到这一点?
I tried the following nut with no success (see JSFIDDLE here) 我尝试了以下坚果,但没有成功(请参见此处的JSFIDDLE )
class Cars extends React.Component{
constructor(){
super()
this.state = {
limit: 5,
cars: ["Audi", "Alfa Romeo", "BMW", "Citroen", "Dacia", "Ford", "Mercedes", "Peugeot", "Porsche", "VW"]
}
}
showPreviousCars() {
// show previous 5 items
}
showNextCars(){
this.setState({
limit: this.state.limit + 5
})
}
render(){
let cars = this.state.cars.slice(0,this.state.limit);
return(
<div className="car-wrapper">
<ul>
<li><a onClick={this.showPreviousCars.bind(this)}>Previous 5</a></li>
{cars.map((car, i) => {
return(
<li key={i}>{car}</li>
)
})}
<li><a onClick={this.showNextCars.bind(this)}>Next 5</a></li>
</ul>
</div>
)
}
}
Any suggestions are welcome! 欢迎任何建议!
You can use Array.prototype.slice
(check the documentation here to know what arguments to pass) to work with a portion of your array: 您可以使用
Array.prototype.slice
(请参阅此处的文档以了解要传递的参数)来处理部分数组:
cars.slice(this.state.limit, this.state.limit + 5).map(...)
Edit: two things: 编辑:两件事:
slice(this.state.limit - 5, this.state.limit)
slice(this.state.limit - 5, this.state.limit)
showNextCars
function too, to make sure you don't end up out of your array bounds showNextCars
函数,以确保您不会超出数组范围 Use offset and limit 使用偏移量和限制
class Cars extends React.Component{
constructor(props){
super(props)
this.state = {
limit: 5,
offset:0,
cars: ["Audi", "Alfa Romeo", "BMW", "Citroen", "Dacia", "Ford", "Mercedes", "Peugeot", "Porsche", "VW"]
}
}
showPreviousCars() {
// show previous 5 items
}
showNextCars(){
this.setState({
offset:this.state.limit
limit: this.state.limit + 5,
})
}
render(){
let cars = this.state.cars.slice(this.state.offset,this.state.limit);
return(
<div className="car-wrapper">
<ul>
<li><a onClick={this.showPreviousCars.bind(this)}>Previous 5</a></li>
{cars.map((car, i) => {
return(
<li key={i}>{car}</li>
)
})}
<li><a onClick={this.showNextCars.bind(this)}>Next 5</a></li>
</ul>
</div>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.