teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問ReactでのonClickの動かし方

編集履歴

回答編集履歴

9

a

2018/04/07 01:51

投稿

HayatoKamono
HayatoKamono

スコア2415

test CHANGED
@@ -134,7 +134,7 @@
134
134
 
135
135
  this.props.defaultColumns.map(
136
136
 
137
- function (column) { //ここのcolumnをonClickに渡す
137
+ function (column) { //ここのcolumnが使われているだけの話
138
138
 
139
139
  return (
140
140
 
@@ -152,4 +152,4 @@
152
152
 
153
153
 
154
154
 
155
- リンク先記事の場合は、mapメソッドの第一引数に渡す関数の第一引数にcolumnが渡ってくるので、それをonClickのイベントリスナーで、`onClick={ () => this.handleSort(column) }`のように、columnを渡すことが出来ます。
155
+ リンク先記事の場合は、mapメソッドの第一引数に渡す関数の第一引数にcolumnが渡ってくるので、それをonClickのイベントリスナーで、`onClick={ () => this.handleSort(column) }`のように参照しているだけの話です。

8

a

2018/04/07 01:51

投稿

HayatoKamono
HayatoKamono

スコア2415

test CHANGED
@@ -113,3 +113,43 @@
113
113
 
114
114
 
115
115
  ということを思い出してみると、今回の質問もクリアになるのではないでしょうか？
116
+
117
+
118
+
119
+ # 追記2
120
+
121
+
122
+
123
+ > (column)=>this.handleSort(column)でないと()=>this.handleSort(column)のcolumnの値ってスコープ的に取ってこれないのでは
124
+
125
+
126
+
127
+ 対象記事へのリンクに気づいておらず、先ほどリンク先の内容を確認しました。
128
+
129
+
130
+
131
+ ```
132
+
133
+ {
134
+
135
+ this.props.defaultColumns.map(
136
+
137
+ function (column) { //ここのcolumnをonClickに渡す
138
+
139
+ return (
140
+
141
+ <th onClick={() => this.handleSort(column)}>{column}</th>
142
+
143
+ );
144
+
145
+ }
146
+
147
+ )
148
+
149
+ }
150
+
151
+ ```
152
+
153
+
154
+
155
+ リンク先記事の場合は、mapメソッドの第一引数に渡す関数の第一引数にcolumnが渡ってくるので、それをonClickのイベントリスナーで、`onClick={ () => this.handleSort(column) }`のように、columnを渡すことが出来ます。

7

a

2018/04/07 01:43

投稿

HayatoKamono
HayatoKamono

スコア2415

test CHANGED
@@ -64,10 +64,52 @@
64
64
 
65
65
 
66
66
 
67
- これで分かりますかね？(あとで追記しますが、これで分かって解決であればコメント残すなり、質問閉じてしまってください。）
67
+ ~~これで分かりますかね？(あとで追記しますが、これで分かって解決であればコメント残すなり、質問閉じてしまってください。）~~
68
68
 
69
69
 
70
70
 
71
- # 参考
71
+ # 追記
72
72
 
73
+
74
+
75
+ まず前提として、clickイベントが発生した時に呼ばれるイベントリスナーの第一引数には[`SyntheticEvent`](https://reactjs.org/docs/events.html)のインスタンスが渡ってきます。([SyntheticEvent - React](https://reactjs.org/docs/events.html))
76
+
77
+
78
+
79
+ なので、`(column)=>this.handleSort(column)`とした場合、変数`column`で参照出来るのは`SyntheticEvent`のインスタンスです。
80
+
81
+
82
+
83
+ これは何もReactに限った話ではありません。
84
+
85
+
86
+
87
+ ブラウザー環境で例えば、あるDOM要素にClickイベントが発生した時に何らかの処理を実行させたい場合、どのように書くかを思い出してください。
88
+
89
+
90
+
91
+ ```
92
+
93
+ var btn = document.getElementById('btn');
94
+
73
- [SyntheticEvent - React](https://reactjs.org/docs/events.html)
95
+ btn.addEventListener('click', function(event, foo, bar) {
96
+
97
+ console.log(event); //event object
98
+
99
+ console.log(foo); //undefined
100
+
101
+ console.log(bar); //undefined
102
+
103
+ })
104
+
105
+ ```
106
+
107
+
108
+
109
+ ここでも、イベントリスナーの第一引数にはeventオブジェクトが自動的に渡ってきています。
110
+
111
+ また、第２引数以降に好き勝手なものを与えたところで、それらの引数に渡した名前はundefinedとなり、何も参照出来ません。
112
+
113
+
114
+
115
+ ということを思い出してみると、今回の質問もクリアになるのではないでしょうか？

6

a

2018/04/07 01:24

投稿

HayatoKamono
HayatoKamono

スコア2415

test CHANGED
@@ -11,18 +11,6 @@
11
11
 
12
12
 
13
13
  class App extends Component {
14
-
15
-
16
-
17
- constructor(props) {
18
-
19
- super(props);
20
-
21
- this.handleClick1 = this.handleClick1.bind(this);
22
-
23
- this.handleClick2 = this.handleClick2.bind(this);
24
-
25
- }
26
14
 
27
15
 
28
16
 

5

a

2018/04/07 00:50

投稿

HayatoKamono
HayatoKamono

スコア2415

test CHANGED
@@ -44,8 +44,6 @@
44
44
 
45
45
  render() {
46
46
 
47
-
48
-
49
47
  const message = 'Hello!'
50
48
 
51
49
  return (

4

a

2018/04/07 00:48

投稿

HayatoKamono
HayatoKamono

スコア2415

test CHANGED
@@ -21,8 +21,6 @@
21
21
  this.handleClick1 = this.handleClick1.bind(this);
22
22
 
23
23
  this.handleClick2 = this.handleClick2.bind(this);
24
-
25
-
26
24
 
27
25
  }
28
26
 
@@ -56,7 +54,7 @@
56
54
 
57
55
  <p><button onClick={(event) => console.log(message)}>Button A</button></p>
58
56
 
59
- <p><button onClick={(event) => this.handleClick1(event, message )}>Button B</button></p>
57
+ <p><button onClick={(event) => this.handleClick1(event, message)}>Button B</button></p>
60
58
 
61
59
  <p><button onClick={(event) => this.handleClick2(message)}>Button C</button></p>
62
60
 

3

a

2018/04/07 00:47

投稿

HayatoKamono
HayatoKamono

スコア2415

test CHANGED
@@ -18,13 +18,25 @@
18
18
 
19
19
  super(props);
20
20
 
21
- this.handleClick = this.handleClick.bind(this);
21
+ this.handleClick1 = this.handleClick1.bind(this);
22
+
23
+ this.handleClick2 = this.handleClick2.bind(this);
24
+
25
+
22
26
 
23
27
  }
24
28
 
25
29
 
26
30
 
27
- handleClick(event, value) {
31
+ handleClick1(event, value) {
32
+
33
+ console.log(value)
34
+
35
+ }
36
+
37
+
38
+
39
+ handleClick2(value) {
28
40
 
29
41
  console.log(value)
30
42
 
@@ -44,7 +56,9 @@
44
56
 
45
57
  <p><button onClick={(event) => console.log(message)}>Button A</button></p>
46
58
 
47
- <p><button onClick={(event) => this.handleClick(event, message)}>Button B</button></p>
59
+ <p><button onClick={(event) => this.handleClick1(event, message )}>Button B</button></p>
60
+
61
+ <p><button onClick={(event) => this.handleClick2(message)}>Button C</button></p>
48
62
 
49
63
  </div>
50
64
 

2

a

2018/04/07 00:47

投稿

HayatoKamono
HayatoKamono

スコア2415

test CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  <p><button onClick={(event) => console.log(message)}>Button A</button></p>
46
46
 
47
- <p><button onClick={(event) => this.handleClick(event, message )}>Button B</button></p>
47
+ <p><button onClick={(event) => this.handleClick(event, message)}>Button B</button></p>
48
48
 
49
49
  </div>
50
50
 

1

a

2018/04/07 00:42

投稿

HayatoKamono
HayatoKamono

スコア2415

test CHANGED
@@ -67,3 +67,9 @@
67
67
 
68
68
 
69
69
  これで分かりますかね？(あとで追記しますが、これで分かって解決であればコメント残すなり、質問閉じてしまってください。）
70
+
71
+
72
+
73
+ # 参考
74
+
75
+ [SyntheticEvent - React](https://reactjs.org/docs/events.html)