如何检索循环呈现的指数反应的组分

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