javascript - 在 react onclick 中循环遍历数组

Question

我有一个对象数组。如何在点击时循环遍历此数组？

test = ['a', 'b', 'c', 'd']
 {this.state.test.map(function(i){
     return <span> {i} </span>
  })}

我通常会在 React 中像这样循环，但这会一次打印出来。如何在页面上显示“a”，然后在下次单击它时显示“b”，直到数组末尾？

我需要一个函数来判断我在数组中的位置，并在适当的时候将其显示在页面上

Answer 1

您可以实现例如一个计数器变量并使用 Array#slice 显示 test 数组中指定数量的元素。

Codesandbox link

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 函数。

Improved codesandbox link

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>