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

質問編集履歴

2

修正

2018/03/14 10:03

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -138,7 +138,7 @@
138
138
  render() {
139
139
  return(
140
140
  <div>
141
- <button onClick={() => {this.buttonClick();}>ボタン</button>
141
+ <button onClick={() => {this.buttonClick();}}>ボタン</button>
142
142
  </div>
143
143
  );
144
144
  }

1

コードの追加

2018/03/14 10:03

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- 子のcomponent親のstateが変わっにpropsで渡したい
1
+ 子のcomponentから親のstateを更新させ子が持ってるpropsを更新させたい
body CHANGED
@@ -1,2 +1,149 @@
1
1
  あるcomponentでcomponentWillUpdate()をし、
2
- state、またはpropsが更新されたタイミングで子のcomponentにpropsで親のcomponentのstateを渡したいのですがどうすればできますか?
2
+ state、またはpropsが更新されたタイミングで子のcomponentにpropsで親のcomponentのstateを渡したいのですがどうすればできますか?
3
+
4
+ ## コード
5
+ 親component
6
+ ```
7
+ import React from 'react';
8
+ import PropTypes from 'prop-types';
9
+ import component1 from './component1';
10
+ import component2 from './component2';
11
+
12
+
13
+ class parent extends React.Component {
14
+ constructor(props) {
15
+ super(props);
16
+
17
+ this.state = {
18
+ array: [
19
+ { test: 'test1', test1: false, index: 0},
20
+ { test: 'test2', test1: false, index: 1},
21
+ { test: 'test3', test1: false, index: 2},
22
+ ],
23
+ };
24
+ }
25
+
26
+ onSubmitState() {
27
+ this.setState({
28
+ array: [
29
+ { test: 'aaa', test1: true, index: 0},
30
+ { test: 'bbb', test1: true, index: 1},
31
+ { test: 'ccc', test1: true, index: 2},
32
+ ],
33
+ });
34
+ }
35
+
36
+ cmp1Props(obj) {
37
+ return (
38
+ <component1
39
+ cmp1Props={obj}
40
+ />
41
+ );
42
+ }
43
+
44
+ cmp2Props(obj) {
45
+ return (
46
+ <component2
47
+ cmp2Props={obj},
48
+ onSubmitState={() => {this.onSubmitState();}}
49
+ />
50
+ );
51
+ }
52
+ render() {
53
+ const cmp1 = this.state.array.map((e) => {
54
+ return (
55
+ this.cmp1Props(e)
56
+ );
57
+ });
58
+
59
+ const cmp2 = this.state.array.map((e) => {
60
+ return (
61
+ this.cmp2Props(e)
62
+ );
63
+ });
64
+
65
+ return (
66
+ <div>
67
+ {cmp1}
68
+ {cmp2}
69
+ </div>
70
+ );
71
+ }
72
+ }
73
+
74
+ export default parent;
75
+ ```
76
+
77
+ component1(子)
78
+ ```
79
+ import React from 'react';
80
+ import PropTypes from 'prop-types';
81
+
82
+ class component1 extends React.Component {
83
+ static propTypes = {
84
+ cmp1Props: PropTypes.object,
85
+ };
86
+
87
+ constructor(props) {
88
+ super(props);
89
+
90
+ this.state = {
91
+ test: this.props.cmp1Props.test,
92
+ test1: this.props.cmp1Props.test1,
93
+ };
94
+ }
95
+
96
+ render() {
97
+ if(this.state.test1) {
98
+ return(
99
+ <div>
100
+ <p>成功</p>
101
+ </div>
102
+ );
103
+ } else {
104
+ return(
105
+ <div>
106
+ <p>失敗</p>
107
+ </div>
108
+ );
109
+ }
110
+ }
111
+ }
112
+
113
+ export default component1;
114
+ ```
115
+
116
+ component2(子)
117
+ ```
118
+ import React from 'react';
119
+ import PropTypes from 'prop-types';
120
+
121
+ const propTypes = {
122
+ cmp2Props: PropTypes.object,
123
+ onSubmitState: PropTypes.func
124
+ };
125
+
126
+ class component2 extends React.Component {
127
+ constructor(props) {
128
+ super(props);
129
+ this.state = {
130
+ index: this.props.cmp2Props.index,
131
+ };
132
+ }
133
+
134
+ buttonClick() {
135
+ return this.props.onSubmitState();
136
+ }
137
+
138
+ render() {
139
+ return(
140
+ <div>
141
+ <button onClick={() => {this.buttonClick();}>ボタン</button>
142
+ </div>
143
+ );
144
+ }
145
+ }
146
+
147
+ component2.propTypes = propTypes;
148
+ export default component2;
149
+ ```