Javascript 如何在页面中显示从用户处获得的信息?
我想在带有“上一页”和“下一页”按钮的页面中显示从用户处获得的信息,而不是在一个页面上 我喜欢在一页上显示每5个元素Javascript 如何在页面中显示从用户处获得的信息?,javascript,reactjs,Javascript,Reactjs,我想在带有“上一页”和“下一页”按钮的页面中显示从用户处获得的信息,而不是在一个页面上 我喜欢在一页上显示每5个元素 const incomeItemShow = incomeContent.map(value => <SummaryItem key= {value.id} money={value} func={props.money} />); incomeContent是一个数组,保存我从用户那里获得的数据,包括一个对象{id:0,check:in,number:12
const incomeItemShow = incomeContent.map(value => <SummaryItem key=
{value.id} money={value} func={props.money} />);
incomeContent是一个数组,保存我从用户那里获得的数据,包括一个对象{id:0,check:in,number:12000,text:sometext}到目前为止您尝试了什么?
如果是我,乍一看,我会在状态中创建一个属性,类似于CurrentItemDisplay,它是一个由两个数字组成的数组。第一个元素是显示的incomeContent第一个元素的索引,而第二个元素是显示的incomeContent最后一个元素的索引
然后,显示两个按钮,其中onClick={this.back}和onClick={this.forward},这两个函数可能类似于:
back = () => {
const currentItemDisplayed = Object.assign([], this.state.currentItemDisplayed);
currentItemDisplayed[0] -= 5;
currentItemDisplayed[1] -= 5;
this.setState({currentItemDisplayed[0]});
}
forward = () => {
const currentItemDisplayed = Object.assign([], this.state.currentItemDisplayed);
currentItemDisplayed[0] += 5;
currentItemDisplayed[1] += 5;
this.setState({currentItemDisplayed[0]});
}
render() {
const currentItemDisplayed = this.state.currentItemDisplayed;
const itemToDisplay = incomeContent.slice(currentItemDisplayed[0], currentItemDisplayed[1]);
..
return (
..
{itemToDisplay.map(item => <SummaryItem ... /> )}
..
)
}
请注意:您应该涵盖已经显示前五个元素并单击“上一步”按钮的情况。在这种情况下,back不应将[-5,0]保存在状态中,否则将出现错误
最后,在render方法中,您应该编写如下内容:
back = () => {
const currentItemDisplayed = Object.assign([], this.state.currentItemDisplayed);
currentItemDisplayed[0] -= 5;
currentItemDisplayed[1] -= 5;
this.setState({currentItemDisplayed[0]});
}
forward = () => {
const currentItemDisplayed = Object.assign([], this.state.currentItemDisplayed);
currentItemDisplayed[0] += 5;
currentItemDisplayed[1] += 5;
this.setState({currentItemDisplayed[0]});
}
render() {
const currentItemDisplayed = this.state.currentItemDisplayed;
const itemToDisplay = incomeContent.slice(currentItemDisplayed[0], currentItemDisplayed[1]);
..
return (
..
{itemToDisplay.map(item => <SummaryItem ... /> )}
..
)
}
这个想法是使用一个内部索引来显示下一个项目。它可能看起来像这样
const itemsToShow = incomeContent.slice(index, index + 5);
“上一页”和“下一页”按钮会将索引增加/减少5或X。您可能需要研究解释其概念的分页。因此,基本上需要分页。我在你的问题中没有看到任何与分页相关的代码。你试过什么?P.S.对此,您可能需要考虑一些NPM /纱线包来进行分页的反应。