Schleife durch Array in reagieren onclick

Question

Ich habe eine Reihe von Objekten. Wie kann ich dieses Array beim Klick durchlaufen?

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

Ich würde normalerweise Schleife wie diese in durch reagieren, sondern diese druckt sie alle auf einmal aus. Wie kann ich 'a' auf der Seite anzeigen und dann das nächste Mal, wenn ich darauf klicke, zeige ich 'b' an bis zum Ende des Arrays?

Ich brauche eine Funktion, die sagen kann, wo ich in der Matrix bin, und dass im richtigen Moment auf der Seite angezeigt werden

Answer 1

Sie könnten zum Beispiel implementieren eine Zählervariable und verwenden Sie Array#slice, um die angegebene Anzahl von Elementen innerhalb des Arrays test anzuzeigen.

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

bearbeiten: Ich mit ihm spielte und eigentlich eine bessere Lösung, die ich bekam sogar, die Sie wieder Looping Array#map auf jeder machen, mit wenig Hilfe von hidden zu vermeiden erlaubt Attribut. Auch werden wir die Array#slice Funktion loswerden.

Improved codesandbox link

app.js

{this.state.test.map((v, i) => { 
    return (
    <span hidden={i >= this.state.index}>{v}</span> 
); 
})} 

Und die Span.js Komponente:

<span hidden={this.props.hidden}> 
    {this.props.v} 
</span>