handle Zustand in reactjs

Question

Ich habe eine Schaltfläche in der Karte, die Karte läuft 3 mal, so 3 Schaltfläche ist da, wenn Sie klicken, sollte der Status auf wahr oder falsch ändern, um die Überschrift anzuzeigen oder zu verbergen, aber wenn ich bin Durch Klicken auf eine Schaltfläche werden alle drei Texte angezeigt. Wieso ist es so? und wie dies zu handhaben, so dass auf einen Knopf klicken, sollte nicht auslösen alle die Taste

class Example extends React.Component{ 
constructor(){ 
    super() 
    this.state={ 
    arr:[ 1,2,3 ], 
    show : false 
    } 
this.handleShow=this.handleShow.bind(this) 
    } 

handleShow(){ 
this.setState ({ 
show:!this.state.show 
    }) 
    } 

render(){ 
    this.state.arr.map(()=>console.log("niketh")) 
    return(<div> 
    {this.state.arr.map(()=> 

<div> 
    <button onClick={this.handleShow}>click me</button> 
    {this.state.show?<h1>this is text inside map</h1> 
    :false 
    } 
    </div> 
)} 
</div> 
) 

}} 

ReactDOM.render(<Example/>,document.getElementById('root')) 

So etwas wie dieses

Answer 1

Es ist eine Kombination von Dingen. Zum einen haben Sie an alle Schaltflächen dieselbe Ereignisbehandlungsroutine angehängt, so dass dieselbe Logik ausgelöst wird, wenn auf eine der Schaltflächen geklickt wird. Und Sie haben nur ein Zustandsfeld, um zu handhaben, ob der Text angezeigt wird oder nicht, obwohl Sie 3 Textfelder haben. Je nachdem, was Sie eigentlich erreichen möchten, können Sie das beheben, indem Sie ein paar Dinge tun. Verwenden Sie eine Inline-Methode für Ihren Ereignishandler und mehrere Felder, um den Status des sichtbaren Texts zu behandeln.

aktualisieren setzt nun Zustandsarray basierend auf beliebig großen Array

Ich habe nicht überprüfen diese, aber es behoben werden könnte so etwas wie dies zu tun:

class Example extends React.Component{ 
constructor(){ 
    const initialData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 
    super() 
    this.state={ 
    arr:initialData, 
    // generate array of with the same size of 
    show : initialData.map(() => false) 
} 

this.handleShow=this.handleShow.bind(this) 
} 
// pass parameter to show which visbile state to change 
handleShow(i){ 
this.setState ({ 
show[i]:!this.state.show[i] 
    }) 
} 

render(){ 
    return(
    <div> 
    {/* 
    map callback actually has three params: 
    element, index, array 
    using the index here to know which one is being called 
    */} 
    this.state.arr.map((x, i)=> 
    { 
    {/* making an inline event handler taht will call handle show */} 
    <button onClick={ (evt) => this.handleShow(i) }> click me <button> 
    {this.state.show[i]? <h1> I am text <h1> : false } 
    } 
    </div> 
      ) 
    } 

Answer 2

dank @John Teague für die Annahme dieses und hier ist der Arbeits Link http://codepen.io/Zedak/pen/RpgRoQ?editors=0011

class Example extends React.Component{ 
constructor(){ 
    super() 
    this.state={ 
    arr:[ 1,2,3 ], 
    show : [false,false,false] 
    } 
this.handleShow=this.handleShow.bind(this) 
} 

handleShow(e,i){ 
    this.state.show[i]=!this.state.show[i] 
    this.setState({ 
show:this.state.show 
}) 

} 

render(){ 

    return(<div> 
    {this.state.arr.map((x,i)=> 

<div> 
<button onClick={ (evt) => this.handleShow(evt,i) }> click me </button> 
{this.state.show[i]? <h1> I am text inside map</h1> 
          : false 
} 
    </div> 
)} 
    </div> 
    ) 

}} 

ReactDOM.render(<Example/>,document.getElementById('root')) 

aber ich frage mich immer noch, wie zu behandeln, wenn Array groß oder unbekannt ist.