teratail
回答率
85.48%
質問するログイン新規登録
トップReduxに関する質問Reactでクリックした要素にclassを付与して別の要素に付与してたclassを削除

編集履歴

回答編集履歴

9

テキスト修正

2019/10/22 07:38

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -10,12 +10,14 @@
10
10
 
11
11
 
12
12
 
13
+ ### Parent#constructor
14
+
15
+
16
+
13
17
  `Parent` の `this.state.active` は初期値を -1 とします。これは、どの子コンポーネントもアクティブではないことを表します。
14
18
 
15
19
 
16
20
 
17
- ### Parent#constructor
18
-
19
21
  ```javascript
20
22
 
21
23
  constructor(props) {
@@ -40,12 +42,30 @@
40
42
 
41
43
 
42
44
 
43
- 次に、`this.state.active` を変更するメソッドですが、 メソッド名は`onActive` ではなく、例えば `onChangeActive` あるいは、子がタブなのであれば、`onChangeTab` などとしたほうがよいでしょう。なぜなら `onActive`だと、Parentコンポーネント自体が active になったとき、という意味あいになってしまうからです。
45
+
44
46
 
45
47
 
46
48
 
47
49
  ### Parent#onChangeActive
48
50
 
51
+
52
+
53
+ 次に、`this.state.active` を変更するメソッドですが、 メソッド名は`onActive` ではなく、例えば
54
+
55
+ `onChangeActive`
56
+
57
+ あるいは、子がタブなのであれば、
58
+
59
+ `onChangeTab`
60
+
61
+ などとしたほうがよいでしょう。(他にもより良い名前があるかもしれません。) `onActive`だと、Parentコンポーネント自体が active になったとき、という意味あいになってしまうからです。
62
+
63
+
64
+
65
+ 以下、 `onChangeActive` というメソッド名にしました。
66
+
67
+
68
+
49
69
  ```javascript
50
70
 
51
71
  onChangeActive = active => {

8

テキスト修正

2019/10/22 07:38

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- `Parent` の `this.state.active` は初期値を -1 とします。これは、どのコンポーネントもアクティブではないことを表します。
13
+ `Parent` の `this.state.active` は初期値を -1 とします。これは、どの子コンポーネントもアクティブではないことを表します。
14
14
 
15
15
 
16
16
 

7

テキスト修正

2019/10/22 06:51

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -243,3 +243,49 @@
243
243
 
244
244
 
245
245
  以上、参考になれば幸いです。
246
+
247
+
248
+
249
+ ### 補足
250
+
251
+
252
+
253
+ React のバージョン 16.8 以降をお使いでしたら、Parentは、[Hook](https://ja.reactjs.org/docs/hooks-intro.html) を使って、以下のようにも書けます。
254
+
255
+
256
+
257
+ ```jsx
258
+
259
+ const Parent = () => {
260
+
261
+ const [activeIndex, changeActive] = React.useState(-1);
262
+
263
+
264
+
265
+ return (
266
+
267
+ <div>
268
+
269
+ {[...Array(CHILDREN_COUNT)].map((_, i) =>
270
+
271
+ <Child
272
+
273
+ key={i}
274
+
275
+ text={`Child#${i}`}
276
+
277
+ onActive={() => changeActive(i)}
278
+
279
+ active={i === activeIndex}
280
+
281
+ />
282
+
283
+ )}
284
+
285
+ </div>
286
+
287
+ )
288
+
289
+ }
290
+
291
+ ```

6

テキスト修正

2019/10/22 06:33

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -180,11 +180,11 @@
180
180
 
181
181
  これでとりあえず意図通りに動くようになりますが、ちょっとリファクタします。
182
182
 
183
- `Parent` の render で、`Child` を8個追加して、計10個にしたいとします。その場合、`<Child />` を10個書けばよいわけですが、それだとコードが冗長になってしまいますので、子の数を表す
183
+ `Parent` の render で、`Child` を3個追加して、計5個にしたいとします。その場合、`<Child />` を5個書けばよいわけですが、それだとコードが冗長になってしまいますので、子の数を表す
184
-
184
+
185
- ```
185
+ ```
186
-
186
+
187
- const CHILDREN_COUNT = 10;
187
+ const CHILDREN_COUNT = 5;
188
188
 
189
189
  ```
190
190
 
@@ -230,9 +230,15 @@
230
230
 
231
231
 
232
232
 
233
- 上記で、 クリックされた１つだけがアクティブになる、10個の `Child` が表示されます。
233
+ 上記で、 以下のように5個の `Child` が表示されます。
234
+
235
+
236
+
234
-
237
+ ![イメージ説明](55407ced6c903e73ec70303944ed4e1e.png)
238
+
239
+
240
+
235
-
241
+ `CHILDREN_COUNT` を変更して、`Child` の個数を変えても、アクティブになる `Child`は(最大)１個です。
236
242
 
237
243
 
238
244
 

5

テキスト修正

2019/10/22 06:06

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -144,7 +144,7 @@
144
144
 
145
145
 
146
146
 
147
- 動作確認のため、以下のスタイルで、active になった`Child` では、文字を赤の太字にさせます。
147
+ 動作確認のため、以下のスタイルで、active になった`Child` では、文字を赤の太字にします。
148
148
 
149
149
  ```css
150
150
 
@@ -154,7 +154,7 @@
154
154
 
155
155
 
156
156
 
157
- 上記で、Parentをマウントしてrender させると、以下のように表示されると思います。
157
+ 上記で、Parentをマウントしてrender させると、以下のように表示されます。
158
158
 
159
159
 
160
160
 

4

テキスト修正

2019/10/22 05:59

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -94,7 +94,7 @@
94
94
 
95
95
 
96
96
 
97
- なお、上記の `Child`では、 `text` というpropsを追加して、それを `<div>` の内容として表示させるようにしました。
97
+ なお、上記の `Child`では、 動作確認用の暫定で、`text` というpropsを追加して、これを `<div>` の内容として表示させるようにしました。
98
98
 
99
99
 
100
100
 

3

テキスト修正

2019/10/22 05:45

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -98,7 +98,7 @@
98
98
 
99
99
 
100
100
 
101
- 上記のように`Child`を作っておくと、 `Parent` の render で、２つの子コンポーネントを配置するコードは以下のように書けます。
101
+ 上記のように`Child`を作っておき、`Parent` のほうで `Child` を import すると、`Parent` の render で、２つの子コンポーネントを配置するコードは以下のように書けます。
102
102
 
103
103
 
104
104
 

2

テキスト修正

2019/10/22 05:37

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -40,7 +40,7 @@
40
40
 
41
41
 
42
42
 
43
- 次に、`this.state.active` を変更するメソッドですが、 メソッド名は`onActive` ではなく、例えば `onChangeActive` などとしたほうがよいでしょう。なぜなら `onActive`だと、そのParentコンポーネント自体が active になったとき、という意味あいになってしまうからです。
43
+ 次に、`this.state.active` を変更するメソッドですが、 メソッド名は`onActive` ではなく、例えば `onChangeActive` あるいは、子がタブなのであれば、`onChangeTab` などとしたほうがよいでしょう。なぜなら `onActive`だと、Parentコンポーネント自体が active になったとき、という意味あいになってしまうからです。
44
44
 
45
45
 
46
46
 
@@ -60,7 +60,7 @@
60
60
 
61
61
 
62
62
 
63
- Parent のrender は後で挙げます。先に`Child`コンポーネントを作成します。以下は、`Child` を、個別のファイル、Child.js に作成することを想定しています。
63
+ Parent のrender は後で挙げます。先に`Child`コンポーネントのコード例を挙げます。以下は、`Child` を、個別のファイル、Child.js に作成することを想定しています。
64
64
 
65
65
 
66
66
 

1

テキスト修正

2019/10/22 05:28

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -32,7 +32,11 @@
32
32
 
33
33
  `activeChildIndex`
34
34
 
35
+ だったり、あるいは、子がタブなのであれば
36
+
37
+ `activeTabIndex`
38
+
35
- といったようにするところではありますが、以下では、このまま `this.state.active` で進めます。
39
+ といったようにするところではありますが、以下では、`active`のままで進めます。
36
40
 
37
41
 
38
42
 
@@ -56,7 +60,7 @@
56
60
 
57
61
 
58
62
 
59
- Parent のrender は後で挙げます。先に`Child`コンポーネントを作成します。`Child` は、Parent のソースファイルとは別のファイル、たとえば Child.js といった名前のファイルに作成します。
63
+ Parent のrender は後で挙げます。先に`Child`コンポーネントを作成します。以下は、`Child` を、個別のファイル、Child.js に作成することを想定しています。
60
64
 
61
65
 
62
66