66051


# 質問

React公式ガイドの[6.イベント処理](https://ja.reactjs.org/docs/handling-
events.html)の最後の項目に以下のようなコードがありました。

> ループ内では、イベントハンドラに追加のパラメータを渡したくなることがよくあります。例えば、id という行の ID
> がある場合、以下のどちらでも動作します：
[code]

    <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
    <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
    
[/code]

ドキュメントに記載のある、「ループ内で、イベントハンドラに追加のパラメータを渡す」という例がイメージできません。  
以下のコードと何が異なっているのか、ご教示いただけますと幸いです。

[code]

    <button onClick={id => this.deleteRow(id)>Delete Row</button>
    
[/code]


CC BY-SA 4.0
2020-04-28T03:53:24.557
66049
2020-04-28T04:24:09.217
39848
question
reactjs
Reactのイベントハンドラに引数を渡す場合について


もし、ガイドを前から順番に読みすすめている途中なのであれば、まずは[8\. リストと
key](https://ja.reactjs.org/docs/lists-and-keys.html)まで読みすすめればいいかもしれません。

ループ、リストレンダリング、ようするには配列をループでレンダリングするようなケースにおいてはハンドラにその配列のうち当該要素やそのプロパティなどを渡す必要が多くの場合に存在するでしょう。これを実現するための手段、ということです。

[code]

    class ButtonList extends React.Component {
        handleClick(item, e) {
          console.log('item is:', item)
          //console.log('event is:', e)
           //console.log('this is:', this)
        }
        render() {
          const arr = ['hoge', 'fuga', 'piyo']
    
          return <div>{
              arr.map(item =>
                <button onClick={ e => this.handleClick(item, e)} >Click me</button>
              )
            }</div>
      }
    
    }
    
    ReactDOM.render( <ButtonList / > ,
      document.getElementById('root')
    )
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
    
    <div id="root"></div>
[/code]


CC BY-SA 4.0
2020-04-28T04:24:09.217
66051
2020-04-28T04:24:09.217
2376
66049
answer