forループでレンダリングされたReactコンポーネントのインデックスを取得する方法

Question

レンダリングする必要がある要素のリストを返すプロバイダがあります。このリストの各項目には、選択した要素に基づいて何らかのアクションを実行するボタンが隣接している必要があります。私は<のp>タグにあった情報を必要とし、私のクリックハンドラで

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

：私はそうのように、このビューをレンダリングしています。私は、このアプローチが働くだろうと思った：

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