質問編集履歴

4

読みやすく簡潔にした

2018/07/26 01:46

投稿

Koyyyyyy
Koyyyyyy

スコア55

test CHANGED
File without changes
test CHANGED
@@ -68,143 +68,21 @@
68
68
 
69
69
 
70
70
 
71
+
72
+
71
-
73
+ return (
72
74
 
73
75
 
74
76
 
75
- const messagesDataNew = [];
77
+ <Modal open={this.state.cardModalOpen} onClick={()=>{this.closeModal().bind(this)}} onClose={()=>{this.closeModal()}}>
76
78
 
77
-
78
-
79
-
80
-
81
- const messagesData = this.state.messagesArray;
79
+
82
-
83
-
84
-
85
-
86
-
87
-
88
-
89
-
90
-
91
- for (var i = 0; i < messagesData.length; i++) {
92
-
93
-
94
-
95
-
96
-
97
- messagesDataNew.push(
98
-
99
- <Card onClick={() => {this.showCardModal()}}>
100
-
101
- <Image src={ipfsImageUrl} />
102
-
103
-
104
-
105
- <Card.Content>
106
-
107
- <Card.Meta> {messagesData[i]["author"]}</Card.Meta>
108
-
109
- <Card.Description>
110
-
111
- {messagesData[i]["message"]}
112
-
113
- </Card.Description>
114
-
115
- </Card.Content>
116
-
117
- <Card.Content extra>
118
-
119
- {messagesData[i]["postDate"]}
120
-
121
- </Card.Content>
122
-
123
- <Card.Content extra>
124
-
125
- Amount Of Ether: {messagesData[i]["amountEther"]}ether
126
-
127
- </Card.Content>
128
-
129
- <Card.Content extra>
130
-
131
- <div className='ui two buttons'>
132
-
133
- <Modal trigger={
134
-
135
- <Button basic color='red'>
136
-
137
- IDを確認する
138
-
139
- </Button>
140
-
141
-
142
-
143
- }>
144
-
145
- <Modal.Header>このメッセージID</Modal.Header>
146
-
147
- <Modal.Content image>
148
-
149
- <Modal.Description>
150
-
151
- <Header> {messagesData[i]["transactionId"]}</Header>
152
-
153
-
154
-
155
- </Modal.Description>
156
-
157
-
158
-
159
- </Modal.Content>
160
-
161
- </Modal>
162
-
163
-
164
-
165
- </div>
166
-
167
- </Card.Content>
168
-
169
-
170
-
171
-
172
-
173
- <Card.Content extra>
174
-
175
- <div className='ui two buttons'>
176
-
177
- <SendEtherForm
178
-
179
- toAddress={messagesData[i]["address"]}
180
-
181
- messageId={messagesData[i]["messageId"]}
182
-
183
- />
184
-
185
-
186
-
187
-
188
-
189
- </div>
190
-
191
- </Card.Content>
192
-
193
-
194
-
195
- <Modal open={this.state.cardModalOpen} onClick={()=>{this.closeModal()}} onClose={()=>{this.closeModal()}}>
196
-
197
- <Modal.Header>Select a Photo</Modal.Header>
198
80
 
199
81
  <Modal.Content image>
200
82
 
201
83
  <Image wrapped size='medium' src='https://react.semantic-ui.com/images/avatar/large/rachel.png' />
202
84
 
203
- <Modal.Description>
85
+ <Modal.Description>
204
-
205
- <Header>Default Profile Image</Header>
206
-
207
- <p>We've found the following gravatar image associated with your e-mail address.</p>
208
86
 
209
87
  <p>Is it okay to use this photo?</p>
210
88
 
@@ -212,51 +90,11 @@
212
90
 
213
91
  </Modal.Content>
214
92
 
215
- <Button onClick={()=>{this.closeModal()}}>Close</Button>
93
+ <Button onClick={()=>{this.closeModal().bind(this)}}>Close</Button>
216
94
 
217
95
  </Modal>
218
96
 
219
-
220
-
221
- </Card>
97
+
222
-
223
- );
224
-
225
-
226
-
227
- }
228
-
229
-
230
-
231
- return (
232
-
233
- <Layout>
234
-
235
- <ClipLoader
236
-
237
- loading={this.state.loading}
238
-
239
- />
240
-
241
- <h1>{this.state.place}</h1>
242
-
243
- <h1>にあるメッセージ</h1>
244
-
245
- <Card.Group>
246
-
247
-
248
-
249
- {messagesDataNew}
250
-
251
-
252
-
253
- </Card.Group>
254
-
255
-
256
-
257
- </Layout>
258
-
259
-
260
98
 
261
99
  )
262
100
 

3

fix

2018/07/26 01:46

投稿

Koyyyyyy
Koyyyyyy

スコア55

test CHANGED
File without changes
test CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
  state={
28
28
 
29
-  isModalOpen:false
29
+  cardModalOpen:false
30
30
 
31
31
 
32
32
 

2

/

2018/07/26 01:11

投稿

Koyyyyyy
Koyyyyyy

スコア55

test CHANGED
File without changes
test CHANGED
File without changes

1

2018/07/25 09:45

投稿

Koyyyyyy
Koyyyyyy

スコア55

test CHANGED
File without changes
test CHANGED
@@ -6,6 +6,8 @@
6
6
 
7
7
  reactでsetStateをしてもstateが更新されないという事態に陥りました。具体的にはButtonタグにonClickプロパティを持たせcloseModal function を呼び出して open = "false"にしモーダルが閉じる挙動を望んでいますがなぜかcloseModalは呼ばれているのにstateがtrueのままです。(モーダルはCardをクリックすると開くようにしております)。更新されない原因を教えてもらえるとありがたいです! react semantic UI を使用してボタンやモーダルを表示させています。
8
8
 
9
+ p.S コードが長くなってしまい誠に申し訳ございません。
10
+
9
11
 
10
12
 
11
13
  ```a.js