回答編集履歴
2
テキスト修正
answer
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
</form>
|
|
37
37
|
</div>
|
|
38
38
|
```
|
|
39
|
-
から、`<form />` を取り去り、かつ、ボタンをクリック
|
|
39
|
+
から、`<form />` を取り去り、かつ、ボタンをクリックしたときに`handleSubmit`が呼ばれるようにすればよいので、以下
|
|
40
40
|
|
|
41
41
|
```html
|
|
42
42
|
<div>
|
1
テキスト修正
answer
CHANGED
|
@@ -2,7 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
axios によって送りたいAPIへのリクエストの他に、`<form />` がsubmitされたことによるリクエストが発生しているために意図しない挙動になっているものと思います。
|
|
4
4
|
|
|
5
|
+
以下にて、修正する方法を２つ挙げます。
|
|
6
|
+
|
|
7
|
+
### (1) `<form />` がsubmitされたときのデフォルト動作を抑止
|
|
8
|
+
|
|
5
|
-
|
|
9
|
+
`New.jsx` で、handleSubmit の冒頭、
|
|
6
10
|
```javascript
|
|
7
11
|
handleSubmit = () => {
|
|
8
12
|
axios({
|
|
@@ -15,7 +19,10 @@
|
|
|
15
19
|
axios({
|
|
16
20
|
method : "POST",
|
|
17
21
|
```
|
|
18
|
-
のようにして、`<form />`がsubmitされたときのデフォルト動作を抑止
|
|
22
|
+
のようにして、`<form />`がsubmitされたときのデフォルト動作を抑止します。
|
|
23
|
+
|
|
24
|
+
### (2) `<form />` を使わないようにする。
|
|
25
|
+
|
|
19
26
|
axios でリクエストを送るので `<form />` 自体が不要ですから、renderで返している以下の部分
|
|
20
27
|
|
|
21
28
|
```html
|
|
@@ -41,8 +48,12 @@
|
|
|
41
48
|
</div>
|
|
42
49
|
```
|
|
43
50
|
|
|
44
|
-
のように修正
|
|
51
|
+
のように修正します。
|
|
52
|
+
|
|
53
|
+
|
|
45
54
|
|
|
55
|
+
上記の(1)または(2)の修正によって、意図通りボタンをクリックしたときに、axiosからPOSTでリクエストが送られると思います。
|
|
56
|
+
|
|
46
57
|
それと、蛇足ながらもう一点、ご質問の本題とは関係ありませんが、以下の部分
|
|
47
58
|
|
|
48
59
|
```javascript
|