如何檢索循環呈現的指數反應的組分

Question

我有一個供應商，將返回我需要渲染元素的列表。此列表中的每個項目還必須有一個與其相鄰的按鈕，這些按鈕將根據所選元素執行一些操作。我渲染這種觀點就像這樣：

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

在我的點擊處理程序中，我要求是在< p>標籤中的信息。我認爲這個方法是有效的：

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

但是當我這樣做，我總是在點擊的時間= mylist.length。

所以下次，我還以爲有我的按鈕按住一個鍵屬性，像這樣的：

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

但我意識到，我不知道如何從指數傳遞給我的onClick。我怎樣才能做到這一點？

我是不是接近這個名單渲染錯誤的開始？

Answer 1

你可以把它寫這樣也：

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

同樣可以用onClick事件值的綁定n個數。

你的情況下，也應該工作，檢查這個例子：

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'/>