デモコード
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
handleClick1(event, value) {
console.log(value)
}
handleClick2(value) {
console.log(value)
}
render() {
const message = 'Hello!'
return (
<div>
<p><button onClick={(event) => console.log(message)}>Button A</button></p>
<p><button onClick={(event) => this.handleClick1(event, message)}>Button B</button></p>
<p><button onClick={(event) => this.handleClick2(message)}>Button C</button></p>
</div>
)
}
}
render(<App />, document.getElementById('root'));
これで分かりますかね?(あとで追記しますが、これで分かって解決であればコメント残すなり、質問閉じてしまってください。)
追記
まず前提として、clickイベントが発生した時に呼ばれるイベントリスナーの第一引数にはSyntheticEvent
のインスタンスが渡ってきます。(SyntheticEvent - React)
なので、(column)=>this.handleSort(column)
とした場合、変数column
で参照出来るのはSyntheticEvent
のインスタンスです。
これは何もReactに限った話ではありません。
ブラウザー環境で例えば、あるDOM要素にClickイベントが発生した時に何らかの処理を実行させたい場合、どのように書くかを思い出してください。
var btn = document.getElementById('btn');
btn.addEventListener('click', function(event, foo, bar) {
console.log(event); //event object
console.log(foo); //undefined
console.log(bar); //undefined
})
ここでも、イベントリスナーの第一引数にはeventオブジェクトが自動的に渡ってきています。
また、第2引数以降に好き勝手なものを与えたところで、それらの引数に渡した名前はundefinedとなり、何も参照出来ません。
ということを思い出してみると、今回の質問もクリアになるのではないでしょうか?
追記2
(column)=>this.handleSort(column)でないと()=>this.handleSort(column)のcolumnの値ってスコープ的に取ってこれないのでは
対象記事へのリンクに気づいておらず、先ほどリンク先の内容を確認しました。
{
this.props.defaultColumns.map(
function (column) { //ここのcolumnが使われているだけの話
return (
<th onClick={() => this.handleSort(column)}>{column}</th>
);
}
)
}
リンク先記事の場合は、mapメソッドの第一引数に渡す関数の第一引数にcolumnが渡ってくるので、それをonClickのイベントリスナーで、onClick={ () => this.handleSort(column) }
のように参照しているだけの話です。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/07 10:36