質問編集履歴
2
a
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
|
|
25
25
|
### 追記
|
|
26
26
|
すみません、うまくやりたいことの意図が伝えられていなかったかもしれません。
|
|
27
|
-
基本的にラジオボタンはmustで、
|
|
27
|
+
基本的にラジオボタンはmustで、ラジオボタン郡はname="animal"的な感じです。そのanimalの値がcatとdogと区別したいです。
|
|
28
|
-
その上でラジオボタンの２つ目と３つ目を押したときに表示領域が変わるようにしたいです
|
|
28
|
+
その上でラジオボタンの２つ目と３つ目を押したときにvalue値はdogとして送られるけど、表示領域が変わるようにしたいです
|
|
29
29
|
[https://codesandbox.io/s/admiring-brattain-dzbkl?file=/src/App.js:0-949](https://codesandbox.io/s/admiring-brattain-dzbkl?file=/src/App.js:0-949)
|
|
30
30
|
|
|
31
31
|
```react
|
1
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -20,4 +20,61 @@
|
|
|
20
20
|
|
|
21
21
|
ここに問題に対して試したことを記載してください。
|
|
22
22
|
|
|
23
|
-
・hiddenのフィールドを置いて、radioButtonのchangeイベントでそのフィールドに値を設定し、リクエストを投げる方針を思いつきましたが、実装方法がわかりません。Reactにinput type='hidden'はあるのか
|
|
23
|
+
・hiddenのフィールドを置いて、radioButtonのchangeイベントでそのフィールドに値を設定し、リクエストを投げる方針を思いつきましたが、実装方法がわかりません。Reactにinput type='hidden'はあるのか
|
|
24
|
+
|
|
25
|
+
### 追記
|
|
26
|
+
すみません、うまくやりたいことの意図が伝えられていなかったかもしれません。
|
|
27
|
+
基本的にラジオボタンはmustで、送信されるvalue値としては２つ目も３つ目のラジオボタンも'dog'としたいです。ラジオボタン郡はname="animal"的な感じです。そのanimalの値がcatとdogと区別したいです。
|
|
28
|
+
その上でラジオボタンの２つ目と３つ目を押したときに表示領域が変わるようにしたいです
|
|
29
|
+
[https://codesandbox.io/s/admiring-brattain-dzbkl?file=/src/App.js:0-949](https://codesandbox.io/s/admiring-brattain-dzbkl?file=/src/App.js:0-949)
|
|
30
|
+
|
|
31
|
+
```react
|
|
32
|
+
import React from "react";
|
|
33
|
+
|
|
34
|
+
function App() {
|
|
35
|
+
const [val, setVal] = React.useState("cat");
|
|
36
|
+
|
|
37
|
+
const handleChange = (e) => setVal(e.target.value);
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<>
|
|
41
|
+
{/* Field name='animal'的な*/}
|
|
42
|
+
<label>
|
|
43
|
+
<input
|
|
44
|
+
type="radio"
|
|
45
|
+
value="cat"
|
|
46
|
+
onChange={handleChange}
|
|
47
|
+
checked={val === "cat"}
|
|
48
|
+
/>
|
|
49
|
+
猫派
|
|
50
|
+
</label>
|
|
51
|
+
<label>
|
|
52
|
+
<input
|
|
53
|
+
type="radio"
|
|
54
|
+
value="dog"
|
|
55
|
+
onChange={handleChange}
|
|
56
|
+
checked={val === "dog"}
|
|
57
|
+
/>
|
|
58
|
+
犬派（理由なし）
|
|
59
|
+
</label>
|
|
60
|
+
<label>
|
|
61
|
+
<input
|
|
62
|
+
type="radio"
|
|
63
|
+
value="dog" // 送信されるvalue値としては２つ目もここも'dog'としたい
|
|
64
|
+
onChange={handleChange}
|
|
65
|
+
checked={val === "dog"}
|
|
66
|
+
/>
|
|
67
|
+
犬派（理由あり）
|
|
68
|
+
</label>
|
|
69
|
+
{/*//TODO 犬派(理由なし)を押したときに表示したい*/}
|
|
70
|
+
{<p>犬派(理由なし)</p>}
|
|
71
|
+
{/*//TODO 犬派（理由あり）を押したときに表示したい*/}
|
|
72
|
+
{<p>犬派（理由あり）です</p>}
|
|
73
|
+
</>
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
export default App;
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
```
|