So erhalten Sie den Index von for-loop gerendert React Components

Question

Ich habe einen Anbieter, der eine Liste der Elemente zurückgibt, die ich rendern muss. Jedes Element in dieser Liste muss außerdem über eine Schaltfläche verfügen, die basierend auf dem ausgewählten Element eine Aktion ausführt. Ich bin Rendering diese Ansicht wie folgt:

render(){ 
    <div name="enclosing div"> 
    {this._renderList()} 
    </div> 
} 

_renderList(){ 
    var result = []; 
    var i = 0; 
    for (i; i < this.mylist.length; ++i) { 
    result.push(<p> {this.myList[i]} </p>); 
    result.push(<Button onClick={() => this.clicked(params) } />); 
    } 
    return result; 
} 

In meinem Click-Handler, die ich benötige die Informationen, die in den < p> -Tags war. Ich dachte, dass dieser Ansatz funktionieren würde:

<Button onClick ={() => this.clicked(i)} /> 

Aber wenn ich das tue, i immer = mylist.length zum Zeitpunkt des Klickens.

Also das nächste, dachte ich an eine Schlüsseleigenschaft meine Taste halten, die in etwa so:

<Button index={i} onClick = {...} /> 

Aber ich merkte, ich habe keine Ahnung, wie ich zu onClick aus dem Index zu übergeben. Wie kann ich das machen?

Bin ich diese Liste-Rendering falsch, um mit zu beginnen?

Answer 1

Sie können es wie diese auch schreiben:

render(){ 
    <div name="enclosing div"> 
    {this._renderList()} 
    </div> 
} 

_renderList(){ 
    var result = []; 
    for (let i = 0; i < this.mylist.length; i++) { 
    result.push(<p> {this.myList[i]} </p>); 
    result.push(<Button onClick={this.clicked.bind(this,params)} />); 
    } 
    return result; 
} 

Ebenso können Sie mit onClick Ereignis binden n Zahlen von Werten.

Ihr Fall sollte auch funktionieren, prüfen Sie folgendes Beispiel:

class App extends React.Component{ 
 

 
    onClick(index){ 
 
     console.log('index', index); 
 
    } 
 
    
 
    renderlist(){ 
 
     let list = [], a=[1,2,3,4]; 
 
     for(let i=0; i < a.length; i++) { 
 
      list.push(<p>Item: {i}</p>) 
 
      list.push(<button onClick={()=>this.onClick(i)}>Click Me</button>) 
 
     } 
 
     return list; 
 
    } 
 
    
 
    render(){ 
 
     return(
 
      <div> 
 
      { 
 
       this.renderlist() 
 
      } 
 
      </div> 
 
    ) 
 
    } 
 

 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>