質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1925閲覧

ReactでのonClickの動かし方

gamushiro

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1グッド

0クリップ

投稿2018/04/07 00:24

編集2018/04/07 00:25

ReactのonClickをしたときに、ハンドルしたいイベントにパラメータを渡せずにおり、stackoverflowをみて一応解決はしたのですがなぜこの書き方でいけるのかがわからないため、解説をしていただけると嬉しいです。

その記事では

return ( <th value={column} onClick={() => this.handleSort(column)}>{column}</th> );

でhandleSortに値を渡すことができる、と書いておりましたが(column)=>this.handleSort(column)でないと()=>this.handleSort(column)のcolumnの値ってスコープ的に取ってこれないのでは、、、と思っています。
理由は、()=>this.handleSort(column)を展開(展開っていうのかな)すると

function (){ return this.handleSort(column) }

みたいなかんじになるかなと思いますが、このfunction内のcolumnってどうやって解決するの?ということになり、それではfunctionに引数として与えてあげないとダメだよね、だから

function (column){ return this.handleSort(column) }

が正しいのでは?と思ったのですが、そうではないようです。
どなたかご存知の方がいれば解説をいただきたいです。

HayatoKamono👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

デモコード

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 00:40

編集2018/04/07 01:51
HayatoKamono

総合スコア2415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gamushiro

2018/04/07 10:36

ありがとうございます! 納得したことに加えて、SyntheticEventについて知る良い機会になりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問