1

質問

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>

1 件の回答 1

1

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

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

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

1
  • mapメソッドを用いたループの事例、大変わかりやすかったです。 配列の各要素を引数としてイベントハンドラに渡す場合などを指していたのですね。また、アドバイス頂いた通り、公式ガイドの8. リストとkeyにも目を通しました。
    – nekochannn
    2020年4月28日 5:07

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。