循环通过react onclick中的数组
循环通过react onclick中的数组
提问于 2017-07-25 04:23:19
我有一个对象数组。如何在单击时遍历此数组？
test = ['a', 'b', 'c', 'd']
{this.state.test.map(function(i){
return <span> {i} </span>
})}我通常会在react中像这样循环，但这会一次打印出它们。如何在页面上显示'a‘，然后在下次单击它时，显示'b’，依此类推，直到数组的末尾？
我需要一个函数，它可以告诉我在数组中的位置，并在正确的时刻显示在页面上
回答 2
Stack Overflow用户
发布于 2017-07-25 04:36:09
例如，您可以实现一个计数器变量，并使用Array#slice来显示test数组中指定数量的元素。
import React from "react";
export default class Hello extends React.Component {
state = {
test: ["a", "b", "c", "d"],
index: 0
};
handleClick = () => {
let i = this.state.index < this.state.test.length ? this.state.index += 1 : 0;
this.setState({ index: i });
};
render() {
return (
<div>
{this.state.test.slice(0, this.state.index).map(v => {
return (
<span>{v}</span>
);
})}
<button onClick={this.handleClick}>Click</button>
</div>
);
}
}编辑：我一直在使用它，实际上我得到了一个更好的解决方案，它允许你在每次渲染时避免重新循环Array#map，只需要很少的hidden属性的帮助。此外，我们还去掉了Array#slice函数。
app.js
{this.state.test.map((v, i) => {
return (
<span hidden={i >= this.state.index}>{v}</span>
);
})}和Span.js组件：
<span hidden={this.props.hidden}>
{this.props.v}
</span>Stack Overflow用户
发布于 2020-04-19 18:29:35
首先在您的状态设置初始索引，然后将该索引用作span中的索引数组。接下来，创建一些函数来处理增量，简单地说就是这样
const switchNinjaHandler = () => {
let looper = ++this.state.index % this.state.test.length;
setState({
...personsState, // WE SHOULD ALWAYS GIVE THE EXCACT INITIAL STATE VALUE, THIS IS WHERE SPREAD COMING HANDY
this.index : looper,
});要显示
return ( <div> {this.state.test[this.index]} </div> )页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45289416
复制相关文章
相似问题
腾讯云开发者
