teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

a

2018/03/16 01:35

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -16,12 +16,12 @@
16
16
  class App extends Component {
17
17
 
18
18
  render() {
19
- const sizeList = [
19
+ const sizes = [
20
20
  { id: 'aaa' },
21
21
  { id: 'bbb' },
22
22
  { id: 'ccc' }
23
23
  ]
24
- return <SizeContainer sizeList={sizeList} />
24
+ return <SizeContainer sizes={sizes} />
25
25
  }
26
26
  }
27
27
 
@@ -42,12 +42,10 @@
42
42
  }
43
43
 
44
44
  render() {
45
- const {
46
- sizeList
47
- } = this.props;
45
+ const { sizes } = this.props;
48
46
 
49
47
  return (
50
- sizeList.map((size) => {
48
+ sizes.map((size) => {
51
49
  return (
52
50
  <SizeButton
53
51
  key={size.id}
@@ -75,4 +73,5 @@
75
73
 
76
74
 
77
75
  render(<App />, document.getElementById('root'));
76
+
78
77
  ```

2

2018/03/16 01:35

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -1,5 +1,9 @@
1
1
  ![イメージ説明](df0389ffbb5255185fa9aa4b451dd533.gif)
2
2
 
3
+ 上位のコンポーネントにどのボタンが今、選択されているかのstateを持たせるのがポイントになってきます。
4
+
5
+ 4,5パターンくらい実装方法がありそうですが、一番基礎的なやり方で、かつ、掲載されているコードを元にする方法だと、以下のような感じになると思います。
6
+
3
7
  # Demo Code
4
8
 
5
9
  [https://codesandbox.io/s/k96yvnw77v](https://codesandbox.io/s/k96yvnw77v)

1

a

2018/03/16 01:22

投稿

HayatoKamono
HayatoKamono

スコア2415

answer CHANGED
@@ -6,9 +6,21 @@
6
6
 
7
7
 
8
8
  ```
9
- import React, { Component, Fragment } from 'react';
9
+ import React, { Component } from 'react';
10
10
  import { render } from 'react-dom';
11
11
 
12
+ class App extends Component {
13
+
14
+ render() {
15
+ const sizeList = [
16
+ { id: 'aaa' },
17
+ { id: 'bbb' },
18
+ { id: 'ccc' }
19
+ ]
20
+ return <SizeContainer sizeList={sizeList} />
21
+ }
22
+ }
23
+
12
24
  class SizeContainer extends Component {
13
25
 
14
26
  constructor(props) {
@@ -26,27 +38,21 @@
26
38
  }
27
39
 
28
40
  render() {
41
+ const {
42
+ sizeList
43
+ } = this.props;
44
+
29
45
  return (
30
- <Fragment>
46
+ sizeList.map((size) => {
47
+ return (
31
- <SizeButton
48
+ <SizeButton
32
- key='aaa'
49
+ key={size.id}
33
- id='aaa'
50
+ id={size.id}
34
- isSelected={this.state.selectedButtonId === 'aaa'}
51
+ isSelected={this.state.selectedButtonId === size.id}
35
- onClick={this.handleButtonClick}
52
+ onClick={this.handleButtonClick}
36
- />
53
+ />
37
- <SizeButton
54
+ )
38
- key='bbb'
39
- id='bbb'
40
- isSelected={this.state.selectedButtonId === 'bbb'}
41
- onClick={this.handleButtonClick}
42
- />
55
+ })
43
- <SizeButton
44
- key='ccc'
45
- id='ccc'
46
- isSelected={this.state.selectedButtonId === 'ccc'}
47
- onClick={this.handleButtonClick}
48
- />
49
- </Fragment>
50
56
  )
51
57
  }
52
58
  }
@@ -64,5 +70,5 @@
64
70
 
65
71
 
66
72
 
67
- render(<SizeContainer />, document.getElementById('root'));
73
+ render(<App />, document.getElementById('root'));
68
74
  ```