React.jsでonclickを発火した要素が掴めず困っております

Question

react.jsの勉強をしているのでが、clickイベントの扱いがいまいち理解することが出来ません。
例えば以下のようなコードです。

render : function() {
		var items = this.props.itemList.map((item) => {
			return <div onClick={this.choiceDiv(key)} key={item.id}>
					<div className="caption_top">
						<span>{item.title}</span>
					</div>
					<div className="caption_bottom">
						<span>{item.author_name}</span>
						<span><i className="glyphicon glyphicon-upload"></i>{item.last_update}</span>
					</div>
				</div>
		});
		return (
			<div>
				{items}
			</div>
		);
	},
	choiceDiv : function(e) {
		console.log(e.target);
	},

一番外側のdivでonclickを発火しているのですが、choiceDivに渡されるeのtargetはonclickイベントをしかけていない子要素になります。
子要素にもonclickが仕込んでありバブリングがとかならまだ分かるのですが、そもそもonclickをしかけていない子要素が
choiceDivのeに設定される理由がよく分かりません。

勿論内側は内側でリンクやボタンを設定してイベントを作る可能性も今後あるのですが、とりあえず目先ちゃんとイベントをしかけた要素が取得出来るようにしたいと考えております。

reactの初歩的な質問で恐縮ですが、ご存知の方がいらしたらご教授願います。

Answer 1

onClick等で指定するのは関数そのものです。{}の中で関数を評価する(呼び出す、または、実行する、とも言います。いわば()が付いている状態)とその関数が即座に評価(実行)されて、その返り値が指定されたことになります。ですので、()は付けずに、onClick={this.choiceDiv}としてみて下さい。

Reactのイベント処理では、イベントが発生したとき、設定した関数を発生したイベントを引数にして評価します。ですので、choiceDiv(e)はイベントを引数としてとる関数として作る必要があり、eには発生したイベント(RecatではSyntheticEventというオブジェクトです)が入ります。通常のJavScriptのDOMEventのラッパーになっているため、target等で呼び出したときのターゲットが取得できるという仕組みです。

もし、keyを指定して評価したいなら、keyを引数にするのではなく、e.target等から何がクリックされたを辿った方が良いと思います。高階関数やクロージャーを使う方法もありますが、理解してやらないと難しいですので慣れない内はお勧めしません。

Comments

[rontec]

アドバイスありがとうございます。
今回mapで繰り返し表示している表の行をクリックさせ、どの行がクリックされたかを取得したいと考えております。

この場合、keyを送るよりどの行がクリックされたかエレメントをchoiceDivのメソッドで取得すべきということでしょうか。
onClick={this.choiceDiv}　で指定した場合、やはりchoiceDiv(e)でeに送られるエレメントはonClickが指定されたエレメントではなく、その中の要素のクリックイベントが送られております。

この場合、onclickで指定したエレメントはどのようにいきつくものなのでしょうか。
parentNodeを使おうにも、子の深さも位置によりマチマチなので、使うことが出来ませんでした。

[raccy]

e.currentTargetでうまく取得できませんでしょうか？こちらは、押された要素では無く、バインドしている要素になるようです。
参考: http://gsol.hatenablog.com/entry/2013/12/04/event.curretTarget%E3%81%A8event.target%E3%81%AE%E9%81%95%E3%81%84

[rontec]

ありがとうございます、出来ました！
currentTargetで指定すればよかったのですね…。
ずっと困っていたので、大変助かりました。

Answer 2

onClick={ (e)=>{ this.choiceDiv(e) } }

としたらお望みの挙動になるような気がします

Comments

[rontec]

ご意見ありがとうございます。
アドバイス頂いた通り実行してみましたが、残念ながらエラーになってしまいました。
react難しいですね…。

[rontec]

エラーは間違いでした（他のところがエラーになっていました）。
ただ状況は変わらなかったようです。