回答編集履歴
3
a
test
CHANGED
|
@@ -53,6 +53,10 @@
|
|
|
53
53
|
|
|
54
54
|
|
|
55
55
|
そのため、`foo1.bar`、`foo2.bar`のログを出力すると、一方は` [Function: fn1]`となり、もう一方は`1`となります。
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
なので、`onClick={handleClick}`と`onClick={handleClick()}`では、そもそも、`onClick`に渡している値が違うことをここで確認して下さい。
|
|
56
60
|
|
|
57
61
|
|
|
58
62
|
|
2
a
test
CHANGED
|
@@ -57,6 +57,10 @@
|
|
|
57
57
|
|
|
58
58
|
|
|
59
59
|
これをふまえて、reactをベースに説明を続けます。
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
# 次にReactベースで確認してみる
|
|
60
64
|
|
|
61
65
|
|
|
62
66
|
|
|
@@ -120,14 +124,54 @@
|
|
|
120
124
|
|
|
121
125
|
|
|
122
126
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
#
|
|
127
|
+
# 最後に質問文のコードで確認してみる
|
|
126
128
|
|
|
127
129
|
|
|
128
130
|
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
function ActionLink() {
|
|
134
|
+
|
|
135
|
+
function handleClick(e) {
|
|
136
|
+
|
|
137
|
+
e.preventDefault();
|
|
138
|
+
|
|
129
|
-
|
|
139
|
+
console.log('The link was clicked.');
|
|
140
|
+
|
|
141
|
+
}
|
|
130
142
|
|
|
131
143
|
|
|
132
144
|
|
|
133
|
-
|
|
145
|
+
return (
|
|
146
|
+
|
|
147
|
+
<a href="#" onClick={handleClick()}>
|
|
148
|
+
|
|
149
|
+
Click me
|
|
150
|
+
|
|
151
|
+
</a>
|
|
152
|
+
|
|
153
|
+
);
|
|
154
|
+
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
ここまでの説明でもう十分かとは思いますが、一応、最後に質問文にあったコードを例に説明をします。
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
今までに示したコードの場合はどちらのパターンでもエラーは起きないのですが、質問にあったコードをベースにした上で、かつ、`<a href="#" onClick={handleClick()}>`とした場合は、エラーが起きてしまいます。
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
質問文のコードの場合、`handleClick`関数の引数に`SyntheticEvent`オブジェクトが渡ってくることが期待されており、それを前提に関数内で`e.preventDefault()`が実行されています。
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
ですが、すでに説明した通り、`onClick={handleClick()`とした場合、まず、コンポーネントがレンダーされる時点で、`handleClick`関数が実行されます。その際、引数には何も渡されていないため、`handleClick`関数内で呼ばれる`e.preventDefault()`の`e`が`undefined`となり、エラーが起きてしまいます。
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
なので、`onClick={handleClick}`とするか、`onClick={(e) => handleClick(e)}`のようにしてあげる必要があります。この辺の詳細に関しては、つい先日、テラテイルで似たような質問に回答しましたので、こちらを参考になさって下さい。[https://teratail.com/questions/120714](https://teratail.com/questions/120714)
|
1
a
test
CHANGED
|
@@ -1,5 +1,133 @@
|
|
|
1
|
-
|
|
1
|
+
> onClickの引数は何故onClick={handleClick()}ではないのでしょうか？
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
リンク先のサンプルコードの場合においては、`handleClick()`とするとエラーが発生してしまいます。その理由は最後で説明しますが、場合によっては、`onClick={handleClick()}`であってもエラーにはなりません。ただし、通常、onClickに渡す値であれば、`handleClick`のようにすることになります。理由は後述します。
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
# まずは普通のJavaScriptで確認してみる
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
function fn() {
|
|
14
|
+
|
|
15
|
+
return 1;
|
|
16
|
+
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
const foo1 = {
|
|
22
|
+
|
|
23
|
+
bar: fn
|
|
24
|
+
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
const foo2 = {
|
|
30
|
+
|
|
31
|
+
bar: fn()
|
|
32
|
+
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
console.log(foo1.bar); // [Function: fn1]
|
|
38
|
+
|
|
39
|
+
console.log(foo2.bar); // 1
|
|
40
|
+
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
まず、onClickのことは脇に一旦置いて、上記のコードをベースに説明します。
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
`foo1`の`bar`では、`fn`という関数を渡しています。
|
|
50
|
+
|
|
51
|
+
`foo2`の`bar`では、関数`fn`の実行結果を渡しています。
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
そのため、`foo1.bar`、`foo2.bar`のログを出力すると、一方は` [Function: fn1]`となり、もう一方は`1`となります。
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
これをふまえて、reactをベースに説明を続けます。
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
function ActionButton() {
|
|
66
|
+
|
|
67
|
+
function handleClick() {
|
|
68
|
+
|
|
69
|
+
console.log('The button was clicked.');
|
|
70
|
+
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
return (
|
|
76
|
+
|
|
77
|
+
<button onClick={handleClick()}>aaa</button>
|
|
78
|
+
|
|
79
|
+
);
|
|
80
|
+
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
このコードは質問文のコードをベースにしていますが、少し変更を加えています。
|
|
88
|
+
|
|
89
|
+
違いは`a`タグを`button`タグに変えたことと、`handleClick`メソッドの中での`e.preventDefault()`の呼び出しを削除したくらいです。
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
さて、先ほどのJavaScriptをベースにした説明を思い出していただくとわかると思いますが、`onClick={handleClick()}`とした場合、`handleClick`関数を実行し、その結果を`onClick`に渡していることになります。その為、このコードの場合、ボタンがレンダーされた時点で`handleClick`関数が実行されてしまいます。また、このコードの場合、ボタンをクリックしても`onClick`に渡された値は、`handleClick`関数が返す`undefined`である為、何もおきません。(`handleClick`関数はただログを出力するだけの関数なので戻り値はなく、`undefined`が返るだけです。)
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
function ActionButton() {
|
|
100
|
+
|
|
101
|
+
function handleClick() {
|
|
102
|
+
|
|
103
|
+
console.log('The button was clicked.');
|
|
104
|
+
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
return (
|
|
110
|
+
|
|
111
|
+
<button onClick={handleClick}>aaa</button>
|
|
112
|
+
|
|
113
|
+
);
|
|
114
|
+
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
一方、`onClick={handleClick}`とした場合は、`onClick`には`handleClick`関数そのものを渡しているので、ボタンをクリックする度に、`handleClick`関数が実行されることになります。
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
# 参考
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
つい先日、こちらで似たような質問に回答しましたので、こちらも参考になるかと思います。
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
[https://teratail.com/questions/120714](https://teratail.com/questions/120714)
|