Reactのイベントハンドラに引数を渡す場合について

投稿者: Anonymous

質問

React公式ガイドの6.イベント処理の最後の項目に以下のようなコードがありました。

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

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

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

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

解決

もし、ガイドを前から順番に読みすすめている途中なのであれば、まずは8. リストと keyまで読みすすめればいいかもしれません。

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

_x000D_

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *