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

編集履歴

回答編集履歴

9

テキスト修正

2019/10/22 07:38

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -4,9 +4,10 @@
4
4
 
5
5
  この考え方で、以下、例となるコードを挙げていきます。
6
6
 
7
+ ### Parent#constructor
8
+
7
9
  `Parent` の `this.state.active` は初期値を -1 とします。これは、どの子コンポーネントもアクティブではないことを表します。
8
10
 
9
- ### Parent#constructor
10
11
  ```javascript
11
12
  constructor(props) {
12
13
  super(props);
@@ -19,9 +20,18 @@
19
20
  `activeTabIndex`
20
21
  といったようにするところではありますが、以下では、`active`のままで進めます。
21
22
 
22
- 次に、`this.state.active` を変更するメソッドですが、 メソッド名は`onActive` ではなく、例えば `onChangeActive` あるいは、子がタブなのであれば、`onChangeTab` などとしたほうがよいでしょう。なぜなら `onActive`だと、Parentコンポーネント自体が active になったとき、という意味あいになってしまうからです。
23
23
 
24
+
24
25
  ### Parent#onChangeActive
26
+
27
+ 次に、`this.state.active` を変更するメソッドですが、 メソッド名は`onActive` ではなく、例えば
28
+ `onChangeActive`
29
+ あるいは、子がタブなのであれば、
30
+ `onChangeTab`
31
+ などとしたほうがよいでしょう。(他にもより良い名前があるかもしれません。) `onActive`だと、Parentコンポーネント自体が active になったとき、という意味あいになってしまうからです。
32
+
33
+ 以下、 `onChangeActive` というメソッド名にしました。
34
+
25
35
  ```javascript
26
36
  onChangeActive = active => {
27
37
  this.setState({ active })

8

テキスト修正

2019/10/22 07:38

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  この考え方で、以下、例となるコードを挙げていきます。
6
6
 
7
- `Parent` の `this.state.active` は初期値を -1 とします。これは、どのコンポーネントもアクティブではないことを表します。
7
+ `Parent` の `this.state.active` は初期値を -1 とします。これは、どの子コンポーネントもアクティブではないことを表します。
8
8
 
9
9
  ### Parent#constructor
10
10
  ```javascript

7

テキスト修正

2019/10/22 06:51

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -120,4 +120,27 @@
120
120
 
121
121
  `CHILDREN_COUNT` を変更して、`Child` の個数を変えても、アクティブになる `Child`は(最大)１個です。
122
122
 
123
- 以上、参考になれば幸いです。
123
+ 以上、参考になれば幸いです。
124
+
125
+ ### 補足
126
+
127
+ React のバージョン 16.8 以降をお使いでしたら、Parentは、[Hook](https://ja.reactjs.org/docs/hooks-intro.html) を使って、以下のようにも書けます。
128
+
129
+ ```jsx
130
+ const Parent = () => {
131
+ const [activeIndex, changeActive] = React.useState(-1);
132
+
133
+ return (
134
+ <div>
135
+ {[...Array(CHILDREN_COUNT)].map((_, i) =>
136
+ <Child
137
+ key={i}
138
+ text={`Child#${i}`}
139
+ onActive={() => changeActive(i)}
140
+ active={i === activeIndex}
141
+ />
142
+ )}
143
+ </div>
144
+ )
145
+ }
146
+ ```

6

テキスト修正

2019/10/22 06:33

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -89,9 +89,9 @@
89
89
  ![イメージ説明](739b93bf58600308b43811aa34017754.png)
90
90
 
91
91
  これでとりあえず意図通りに動くようになりますが、ちょっとリファクタします。
92
- `Parent` の render で、`Child` を8個追加して、計10個にしたいとします。その場合、`<Child />` を10個書けばよいわけですが、それだとコードが冗長になってしまいますので、子の数を表す
92
+ `Parent` の render で、`Child` を3個追加して、計5個にしたいとします。その場合、`<Child />` を5個書けばよいわけですが、それだとコードが冗長になってしまいますので、子の数を表す
93
93
  ```
94
- const CHILDREN_COUNT = 10;
94
+ const CHILDREN_COUNT = 5;
95
95
  ```
96
96
  という定数を用意しておいて、Parent の render を以下のようにします。
97
97
 
@@ -114,7 +114,10 @@
114
114
  }
115
115
  ```
116
116
 
117
- 上記で、 クリックされた１つだけがアクティブになる、10個の `Child` が表示されます。
117
+ 上記で、 以下のように5個の `Child` が表示されます。
118
118
 
119
+ ![イメージ説明](55407ced6c903e73ec70303944ed4e1e.png)
119
120
 
121
+ `CHILDREN_COUNT` を変更して、`Child` の個数を変えても、アクティブになる `Child`は(最大)１個です。
122
+
120
123
  以上、参考になれば幸いです。

5

テキスト修正

2019/10/22 06:06

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -71,12 +71,12 @@
71
71
  ```
72
72
 
73
73
 
74
- 動作確認のため、以下のスタイルで、active になった`Child` では、文字を赤の太字にさせます。
74
+ 動作確認のため、以下のスタイルで、active になった`Child` では、文字を赤の太字にします。
75
75
  ```css
76
76
  .current { color: red; font-weight: bold }
77
77
  ```
78
78
 
79
- 上記で、Parentをマウントしてrender させると、以下のように表示されると思います。
79
+ 上記で、Parentをマウントしてrender させると、以下のように表示されます。
80
80
 
81
81
  ![イメージ説明](f0b05edc8f588b7ced142f5c9fa061fc.png)
82
82
 

4

テキスト修正

2019/10/22 05:59

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -46,7 +46,7 @@
46
46
  ```
47
47
  `Child`はstateを持つ必要がなく、stateを持つ必要のないコンポーネントは、上記のように関数型コンポーネント（Functional Component）として書くとよいでしょう。
48
48
 
49
- なお、上記の `Child`では、 `text` というpropsを追加して、それを `<div>` の内容として表示させるようにしました。
49
+ なお、上記の `Child`では、 動作確認用の暫定で、`text` というpropsを追加して、これを `<div>` の内容として表示させるようにしました。
50
50
 
51
51
  上記のように`Child`を作っておき、`Parent` のほうで `Child` を import すると、`Parent` の render で、２つの子コンポーネントを配置するコードは以下のように書けます。
52
52
 

3

テキスト修正

2019/10/22 05:45

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -48,7 +48,7 @@
48
48
 
49
49
  なお、上記の `Child`では、 `text` というpropsを追加して、それを `<div>` の内容として表示させるようにしました。
50
50
 
51
- 上記のように`Child`を作っておくと、 `Parent` の render で、２つの子コンポーネントを配置するコードは以下のように書けます。
51
+ 上記のように`Child`を作っておき、`Parent` のほうで `Child` を import すると、`Parent` の render で、２つの子コンポーネントを配置するコードは以下のように書けます。
52
52
 
53
53
  ### Parent#render
54
54
  ```jsx

2

テキスト修正

2019/10/22 05:37

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -19,7 +19,7 @@
19
19
  `activeTabIndex`
20
20
  といったようにするところではありますが、以下では、`active`のままで進めます。
21
21
 
22
- 次に、`this.state.active` を変更するメソッドですが、 メソッド名は`onActive` ではなく、例えば `onChangeActive` などとしたほうがよいでしょう。なぜなら `onActive`だと、そのParentコンポーネント自体が active になったとき、という意味あいになってしまうからです。
22
+ 次に、`this.state.active` を変更するメソッドですが、 メソッド名は`onActive` ではなく、例えば `onChangeActive` あるいは、子がタブなのであれば、`onChangeTab` などとしたほうがよいでしょう。なぜなら `onActive`だと、Parentコンポーネント自体が active になったとき、という意味あいになってしまうからです。
23
23
 
24
24
  ### Parent#onChangeActive
25
25
  ```javascript
@@ -29,7 +29,7 @@
29
29
  ```
30
30
  上記のメソッドの引数 `active` には、 `0` 以上の整数が入ってくる想定です。たとえば `0` が入ってきたときは、 先頭の子コンポーネント、つまり見た目でいうと、通常、一番上だったり、一番左にある子をアクティブにすることを表します。
31
31
 
32
- Parent のrender は後で挙げます。先に`Child`コンポーネントを作成します。以下は、`Child` を、個別のファイル、Child.js に作成することを想定しています。
32
+ Parent のrender は後で挙げます。先に`Child`コンポーネントのコード例を挙げます。以下は、`Child` を、個別のファイル、Child.js に作成することを想定しています。
33
33
 
34
34
  ### Child.js
35
35
  ```jsx

1

テキスト修正

2019/10/22 05:28

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -15,7 +15,9 @@
15
15
  ```
16
16
  なお、より意味がはっきりするプロパティ名をつけるとすれば、 単に`active` ではなく、
17
17
  `activeChildIndex`
18
+ だったり、あるいは、子がタブなのであれば
19
+ `activeTabIndex`
18
- といったようにするところではありますが、以下では、このまま `this.state.active` で進めます。
20
+ といったようにするところではありますが、以下では、`active`のままで進めます。
19
21
 
20
22
  次に、`this.state.active` を変更するメソッドですが、 メソッド名は`onActive` ではなく、例えば `onChangeActive` などとしたほうがよいでしょう。なぜなら `onActive`だと、そのParentコンポーネント自体が active になったとき、という意味あいになってしまうからです。
21
23
 
@@ -27,7 +29,7 @@
27
29
  ```
28
30
  上記のメソッドの引数 `active` には、 `0` 以上の整数が入ってくる想定です。たとえば `0` が入ってきたときは、 先頭の子コンポーネント、つまり見た目でいうと、通常、一番上だったり、一番左にある子をアクティブにすることを表します。
29
31
 
30
- Parent のrender は後で挙げます。先に`Child`コンポーネントを作成します。`Child` は、Parent のソースファイルとは別のファイル、たとえば Child.js といった名前のファイルに作成します。
32
+ Parent のrender は後で挙げます。先に`Child`コンポーネントを作成します。以下は、`Child` を、個別のファイル、Child.js に作成することを想定しています。
31
33
 
32
34
  ### Child.js
33
35
  ```jsx