質問編集履歴
5
microposts_controller\.rbを追記
test
CHANGED
File without changes
|
test
CHANGED
@@ -542,86 +542,6 @@
|
|
542
542
|
|
543
543
|
中略
|
544
544
|
|
545
|
-
|
546
|
-
|
547
|
-
<li id="micropost-377">
|
548
|
-
|
549
|
-
<button class="btn-old-micropost">
|
550
|
-
|
551
|
-
<span class="content">
|
552
|
-
|
553
|
-
ててて
|
554
|
-
|
555
|
-
|
556
|
-
|
557
|
-
</span>
|
558
|
-
|
559
|
-
<span class="timestamp">
|
560
|
-
|
561
|
-
Posted 3 days ago.
|
562
|
-
|
563
|
-
</span>
|
564
|
-
|
565
|
-
</button>
|
566
|
-
|
567
|
-
</li>
|
568
|
-
|
569
|
-
|
570
|
-
|
571
|
-
|
572
|
-
|
573
|
-
中略
|
574
|
-
|
575
|
-
|
576
|
-
|
577
|
-
|
578
|
-
|
579
|
-
<!-- <form class="new_micropost" id="new_micropost" enctype="multipart/form-data" action="/microposts" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="vvuS1FJiYVwCMOusHRscYXar2GxZDCMWhRbDkThP4ZyL9FOsoVrVXj5fl6WCZ4LCsLevKALMO33RCkdBJ8yWDQ==" />
|
580
|
-
|
581
|
-
|
582
|
-
|
583
|
-
<div class="field">
|
584
|
-
|
585
|
-
<textarea placeholder="Compose new micropost..." name="micropost[content]" id="micropost_content">
|
586
|
-
|
587
|
-
</textarea>
|
588
|
-
|
589
|
-
</div>
|
590
|
-
|
591
|
-
|
592
|
-
|
593
|
-
<input type="submit" name="commit" value="creat" class="btn-post" />
|
594
|
-
|
595
|
-
|
596
|
-
|
597
|
-
<span class="picture">
|
598
|
-
|
599
|
-
<input accept="image/jpeg.iamge/gif,image/png" type="file" name="micropost[picture]" id="micropost_picture" />
|
600
|
-
|
601
|
-
</span>
|
602
|
-
|
603
|
-
</form> -->
|
604
|
-
|
605
|
-
|
606
|
-
|
607
|
-
<!-- <script type="text/javascript">
|
608
|
-
|
609
|
-
$('#micropost_picture').bind('change', function() {
|
610
|
-
|
611
|
-
var size_in_megabytes = this.files[0].size/1024/1024;
|
612
|
-
|
613
|
-
if (size_in_megabytes > 5) {
|
614
|
-
|
615
|
-
alert('Maximum file size is 5MB. Please choose a smaller file.');
|
616
|
-
|
617
|
-
}
|
618
|
-
|
619
|
-
});
|
620
|
-
|
621
|
-
</script> -->
|
622
|
-
|
623
|
-
|
624
|
-
|
625
545
|
</section>
|
626
546
|
|
627
547
|
<div data-react-class="MessageBox" data-react-props="{}"></div>
|
@@ -703,3 +623,91 @@
|
|
703
623
|
|
704
624
|
|
705
625
|
よろしくお願いします。
|
626
|
+
|
627
|
+
|
628
|
+
|
629
|
+
###さらにさらに追記 1/17(2)
|
630
|
+
|
631
|
+
micropostsのcontrollerは下記のようになっています。
|
632
|
+
|
633
|
+
|
634
|
+
|
635
|
+
```
|
636
|
+
|
637
|
+
class MicropostsController < ApplicationController
|
638
|
+
|
639
|
+
before_action :logged_in_user, only: [:create, :destroy, :show]
|
640
|
+
|
641
|
+
before_action :set_micropost, only: [:destroy, :show]
|
642
|
+
|
643
|
+
|
644
|
+
|
645
|
+
def create
|
646
|
+
|
647
|
+
@micropost = current_user.microposts.build(micropost_params)
|
648
|
+
|
649
|
+
if @micropost.save
|
650
|
+
|
651
|
+
flash[:success] = "Micropost created!"
|
652
|
+
|
653
|
+
redirect_to home_path
|
654
|
+
|
655
|
+
else
|
656
|
+
|
657
|
+
@feed_items = []
|
658
|
+
|
659
|
+
render 'static_pages/home'
|
660
|
+
|
661
|
+
end
|
662
|
+
|
663
|
+
end
|
664
|
+
|
665
|
+
|
666
|
+
|
667
|
+
def destroy
|
668
|
+
|
669
|
+
@micropost.destroy
|
670
|
+
|
671
|
+
flash[:success] = "Micropost deleted"
|
672
|
+
|
673
|
+
redirect_to request.referrer || home_path
|
674
|
+
|
675
|
+
end
|
676
|
+
|
677
|
+
|
678
|
+
|
679
|
+
def show
|
680
|
+
|
681
|
+
messages = Micropost.find(params[:id])
|
682
|
+
|
683
|
+
render json: messages
|
684
|
+
|
685
|
+
end
|
686
|
+
|
687
|
+
|
688
|
+
|
689
|
+
private
|
690
|
+
|
691
|
+
|
692
|
+
|
693
|
+
def micropost_params
|
694
|
+
|
695
|
+
params.require(:micropost).permit(:content, :picture)
|
696
|
+
|
697
|
+
end
|
698
|
+
|
699
|
+
|
700
|
+
|
701
|
+
def set_micropost
|
702
|
+
|
703
|
+
@micropost = current_user.microposts.find_by(id: params[:id])
|
704
|
+
|
705
|
+
redirect_to home_path if @micropost.nil?
|
706
|
+
|
707
|
+
end
|
708
|
+
|
709
|
+
end
|
710
|
+
|
711
|
+
|
712
|
+
|
713
|
+
```
|
4
console\.logの確認結果を追記
test
CHANGED
File without changes
|
test
CHANGED
@@ -48,79 +48,285 @@
|
|
48
48
|
|
49
49
|
Parameters: {"micropost"=>{"content"=>"POST"}}
|
50
50
|
|
51
|
-
User Load (0.2ms) SELECT "users".* FROM "users" WHERE
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
51
|
+
User Load (0.2ms) SELECT "users".* FROM "users" WHERE
|
52
|
+
|
53
|
+
|
54
|
+
|
55
|
+
中略
|
56
|
+
|
57
|
+
|
58
|
+
|
59
|
+
Completed 302 Found in 16ms (ActiveRecord: 9.5ms)
|
60
|
+
|
61
|
+
```
|
62
|
+
|
63
|
+
|
64
|
+
|
65
|
+
ただ、上記のように投稿後に表示する部分がうまくいかず、下記のスクリーンショットのような表示となってしまいます。
|
66
|
+
|
67
|
+
本当は、ここでテキストフォームと「MessageBox」というテキストの間に投稿した内容を表示したいです!!
|
68
|
+
|
69
|
+
|
70
|
+
|
71
|
+
![イメージ説明](094f043a15caf85fddce72055d7baa20.png)
|
72
|
+
|
73
|
+
|
74
|
+
|
75
|
+
|
76
|
+
|
77
|
+
###該当のソースコード
|
78
|
+
|
79
|
+
reactで投稿する実装は、下記のサイトを参考にしています
|
80
|
+
|
81
|
+
http://ruby-rails.hatenadiary.com/entry/20151122/1448118932
|
82
|
+
|
83
|
+
|
84
|
+
|
85
|
+
まず、テキストフォームを生成して、POSTする内容を受け取るコードは次のようになっています。
|
86
|
+
|
87
|
+
```javascript
|
88
|
+
|
89
|
+
var MessageForm = React.createClass({
|
90
|
+
|
91
|
+
handleSubmit: function(event) {
|
92
|
+
|
93
|
+
event.preventDefault();
|
94
|
+
|
95
|
+
var user = this.refs.user.value.trim();
|
96
|
+
|
97
|
+
// 親コンポーネントのMessageBocのイベントを呼び出す
|
98
|
+
|
99
|
+
this.props.onMessageSubmit( user );
|
100
|
+
|
101
|
+
// フォームの内容を削除
|
102
|
+
|
103
|
+
this.refs.user.value = '';
|
104
|
+
|
105
|
+
},
|
106
|
+
|
107
|
+
|
108
|
+
|
109
|
+
// 投稿用のフォームを作成して、'user'として内容を受け取る
|
110
|
+
|
111
|
+
render: function() {
|
112
|
+
|
113
|
+
return (
|
114
|
+
|
115
|
+
<form className="commentForm" onSubmit={this.handleSubmit}>
|
116
|
+
|
117
|
+
<input type="text" placeholder="Title" ref='user'/>
|
118
|
+
|
119
|
+
<input type="submit" value="Post" />
|
120
|
+
|
121
|
+
</form>
|
122
|
+
|
123
|
+
);
|
124
|
+
|
125
|
+
}
|
126
|
+
|
127
|
+
});
|
128
|
+
|
129
|
+
|
130
|
+
|
131
|
+
```
|
132
|
+
|
133
|
+
|
134
|
+
|
135
|
+
次に、上記のコードから投稿する内容を受取、AjaxでPOSTするコードが以下のようになっています。
|
136
|
+
|
137
|
+
|
138
|
+
|
139
|
+
```javascript
|
140
|
+
|
141
|
+
var MessageBox = React.createClass({
|
142
|
+
|
143
|
+
getInitialState: function() {
|
144
|
+
|
145
|
+
// isLoading = true : ロード中を表示
|
146
|
+
|
147
|
+
return { messages: [], isLoading: true };
|
148
|
+
|
149
|
+
},
|
150
|
+
|
151
|
+
|
152
|
+
|
153
|
+
...中略
|
154
|
+
|
155
|
+
|
156
|
+
|
157
|
+
// 投稿の内容をAjaxでPOST
|
158
|
+
|
159
|
+
handleMessageSubmit: function(message) {
|
160
|
+
|
161
|
+
$.ajax({
|
162
|
+
|
163
|
+
url: 'microposts',
|
164
|
+
|
165
|
+
datatype: 'json',
|
166
|
+
|
167
|
+
type: 'POST',
|
168
|
+
|
169
|
+
beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
|
170
|
+
|
171
|
+
data: {
|
172
|
+
|
173
|
+
micropost: { content: message }
|
174
|
+
|
175
|
+
},
|
176
|
+
|
177
|
+
success: function(message) {
|
178
|
+
|
179
|
+
var newMessages = this.state.messages.concat(message);
|
180
|
+
|
181
|
+
this.setState({ messages: newMessages });
|
182
|
+
|
183
|
+
}.bind(this),
|
184
|
+
|
185
|
+
error: function(_xhr, status, err) {
|
186
|
+
|
187
|
+
console.error(this.props.url, status, err.toString());
|
188
|
+
|
189
|
+
}.bind(this)
|
190
|
+
|
191
|
+
});
|
192
|
+
|
193
|
+
},
|
194
|
+
|
195
|
+
|
196
|
+
|
197
|
+
render: function() {
|
198
|
+
|
199
|
+
var messageItems = this.state.messages.map(function(message) {
|
200
|
+
|
201
|
+
return (
|
202
|
+
|
203
|
+
<MessageItem key={message.id} message={message}/>
|
204
|
+
|
205
|
+
);
|
206
|
+
|
207
|
+
});
|
208
|
+
|
209
|
+
|
210
|
+
|
211
|
+
// ボタンがクリックされた時に、投稿する内容を受け取ってhandleMessageSubmitに渡す
|
212
|
+
|
213
|
+
return (
|
214
|
+
|
215
|
+
<div>
|
216
|
+
|
217
|
+
<h1>Message Box</h1>
|
218
|
+
|
219
|
+
<div className="messageBox">
|
220
|
+
|
221
|
+
{messageItems}
|
222
|
+
|
223
|
+
<MessageForm onMessageSubmit={this.handleMessageSubmit}/>
|
224
|
+
|
225
|
+
</div>
|
226
|
+
|
227
|
+
</div>
|
228
|
+
|
229
|
+
);
|
230
|
+
|
231
|
+
}
|
232
|
+
|
233
|
+
});
|
234
|
+
|
235
|
+
|
236
|
+
|
237
|
+
```
|
238
|
+
|
239
|
+
|
240
|
+
|
241
|
+
最後に、投稿した内容を表示するためのコードが下記のようになっています。
|
242
|
+
|
243
|
+
|
244
|
+
|
245
|
+
```javascript
|
246
|
+
|
247
|
+
var MessageItem = React.createClass ({
|
248
|
+
|
249
|
+
render: function() {
|
250
|
+
|
251
|
+
return (
|
252
|
+
|
253
|
+
<div className="message">
|
254
|
+
|
255
|
+
<h2 className="messageUser">{this.props.message.user}</h2>
|
256
|
+
|
257
|
+
</div>
|
258
|
+
|
259
|
+
);
|
260
|
+
|
261
|
+
}
|
262
|
+
|
263
|
+
});
|
264
|
+
|
265
|
+
```
|
266
|
+
|
267
|
+
必要な情報などあれば、いっていただけると助かります。
|
268
|
+
|
269
|
+
|
270
|
+
|
271
|
+
|
272
|
+
|
273
|
+
###追記
|
274
|
+
|
275
|
+
|
276
|
+
|
277
|
+
編集依頼にいただいた内容ですが、handleMessageSubmitが実行された際には、下記のサーバーログが残っていました。
|
278
|
+
|
279
|
+
|
280
|
+
|
281
|
+
```
|
282
|
+
|
283
|
+
Started POST "/microposts" for ::1 at 2017-01-16 19:48:46 +0900
|
284
|
+
|
285
|
+
Processing by MicropostsController#create as */*
|
286
|
+
|
287
|
+
Parameters: {"micropost"=>{"content"=>"サンプル"}}
|
288
|
+
|
289
|
+
User Load (1.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1 [["id", 103]]
|
290
|
+
|
291
|
+
(0.5ms) begin transaction
|
292
|
+
|
293
|
+
SQL (3.0ms) INSERT INTO "microposts" ("content", "user_id", "created_at", "updated_at") VALUES (?, ?, ?, ?) [["content", "サンプル"], ["user_id", 103], ["created_at", "2017-01-16 10:48:46.294594"], ["updated_at", "2017-01-16 10:48:46.294594"]]
|
294
|
+
|
295
|
+
(0.9ms) commit transaction
|
58
296
|
|
59
297
|
Redirected to http://localhost:3000/home
|
60
298
|
|
61
|
-
Completed 302 Found in
|
299
|
+
Completed 302 Found in 59ms (ActiveRecord: 5.5ms)
|
62
|
-
|
300
|
+
|
63
|
-
```
|
301
|
+
```
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
302
|
+
|
68
|
-
|
69
|
-
|
303
|
+
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
304
|
+
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
###該当のソースコード
|
80
|
-
|
81
|
-
|
305
|
+
302が返ってきているようなのですが、これが問題なのでしょうか、、
|
82
|
-
|
83
|
-
|
306
|
+
|
84
|
-
|
85
|
-
|
86
|
-
|
307
|
+
|
308
|
+
|
309
|
+
|
310
|
+
|
87
|
-
|
311
|
+
もう1点、MessageItemの動きを調べている時に気づいた点があったので記載します。
|
312
|
+
|
313
|
+
|
314
|
+
|
88
|
-
|
315
|
+
まず、MessageItemが呼び出されていないかも、と思ったので、MessageItemメソッドの中身を
|
316
|
+
|
89
|
-
```
|
317
|
+
```
|
90
|
-
|
318
|
+
|
91
|
-
var Message
|
319
|
+
var MessageItem = React.createClass ({
|
92
|
-
|
93
|
-
handleSubmit: function(event) {
|
94
|
-
|
95
|
-
event.preventDefault();
|
96
|
-
|
97
|
-
var user = this.refs.user.value.trim();
|
98
|
-
|
99
|
-
// 親コンポーネントのMessageBocのイベントを呼び出す
|
100
|
-
|
101
|
-
this.props.onMessageSubmit( user );
|
102
|
-
|
103
|
-
// フォームの内容を削除
|
104
|
-
|
105
|
-
this.refs.user.value = '';
|
106
|
-
|
107
|
-
},
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
// 投稿用のフォームを作成して、'user'として内容を受け取る
|
112
320
|
|
113
321
|
render: function() {
|
114
322
|
|
115
323
|
return (
|
116
324
|
|
325
|
+
<div className="message">
|
326
|
+
|
117
|
-
<
|
327
|
+
<h2 className="messageUser">{this.props.message.user}</h2>
|
118
|
-
|
119
|
-
|
328
|
+
|
120
|
-
|
121
|
-
<input type="submit" value="Post" />
|
122
|
-
|
123
|
-
</
|
329
|
+
</div>
|
124
330
|
|
125
331
|
);
|
126
332
|
|
@@ -128,103 +334,23 @@
|
|
128
334
|
|
129
335
|
});
|
130
336
|
|
131
|
-
|
132
|
-
|
133
|
-
```
|
337
|
+
```
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
338
|
+
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
339
|
+
上記から下記に書き換えてみました。
|
340
|
+
|
142
|
-
|
341
|
+
「サンプル」というテキストを追加しています。
|
342
|
+
|
343
|
+
```
|
344
|
+
|
143
|
-
var Message
|
345
|
+
var MessageItem = React.createClass ({
|
144
|
-
|
145
|
-
getInitialState: function() {
|
146
|
-
|
147
|
-
// isLoading = true : ロード中を表示
|
148
|
-
|
149
|
-
return { messages: [], isLoading: true };
|
150
|
-
|
151
|
-
},
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
...中略
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
// 投稿の内容をAjaxでPOST
|
160
|
-
|
161
|
-
handleMessageSubmit: function(message) {
|
162
|
-
|
163
|
-
$.ajax({
|
164
|
-
|
165
|
-
url: 'microposts',
|
166
|
-
|
167
|
-
datatype: 'json',
|
168
|
-
|
169
|
-
type: 'POST',
|
170
|
-
|
171
|
-
beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
|
172
|
-
|
173
|
-
data: {
|
174
|
-
|
175
|
-
micropost: { content: message }
|
176
|
-
|
177
|
-
},
|
178
|
-
|
179
|
-
success: function(message) {
|
180
|
-
|
181
|
-
var newMessages = this.state.messages.concat(message);
|
182
|
-
|
183
|
-
this.setState({ messages: newMessages });
|
184
|
-
|
185
|
-
}.bind(this),
|
186
|
-
|
187
|
-
error: function(_xhr, status, err) {
|
188
|
-
|
189
|
-
console.error(this.props.url, status, err.toString());
|
190
|
-
|
191
|
-
}.bind(this)
|
192
|
-
|
193
|
-
});
|
194
|
-
|
195
|
-
},
|
196
|
-
|
197
|
-
|
198
346
|
|
199
347
|
render: function() {
|
200
348
|
|
201
|
-
var messageItems = this.state.messages.map(function(message) {
|
202
|
-
|
203
|
-
return (
|
204
|
-
|
205
|
-
<MessageItem key={message.id} message={message}/>
|
206
|
-
|
207
|
-
);
|
208
|
-
|
209
|
-
});
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
// ボタンがクリックされた時に、投稿する内容を受け取ってhandleMessageSubmitに渡す
|
214
|
-
|
215
349
|
return (
|
216
350
|
|
217
|
-
<div>
|
218
|
-
|
219
|
-
<h1>Message Box</h1>
|
220
|
-
|
221
|
-
|
351
|
+
<div className="message">
|
222
|
-
|
223
|
-
|
352
|
+
|
224
|
-
|
225
|
-
|
353
|
+
<h2 className="messageUser">サンプル{this.props.message.user}</h2>
|
226
|
-
|
227
|
-
</div>
|
228
354
|
|
229
355
|
</div>
|
230
356
|
|
@@ -234,164 +360,346 @@
|
|
234
360
|
|
235
361
|
});
|
236
362
|
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
363
|
+
```
|
364
|
+
|
365
|
+
|
366
|
+
|
367
|
+
![イメージ説明](fbb1a9fee22f219ed6faed3bdf0c744e.png)
|
368
|
+
|
369
|
+
|
370
|
+
|
371
|
+
その後、実際に動かしてみると、Postボタンをタップする前には
|
372
|
+
|
373
|
+
上記のスクショのようになっているところ、
|
374
|
+
|
375
|
+
Postボタンタップ後に下記のスクショのように
|
376
|
+
|
377
|
+
「サンプル」というテキストが表示されました。
|
378
|
+
|
379
|
+
|
380
|
+
|
381
|
+
![イメージ説明](7e4a1795703fab56f635b05b0af30f44.png)
|
382
|
+
|
383
|
+
|
384
|
+
|
385
|
+
これでMessageItemが呼び出されていることは分かったのですが、
|
386
|
+
|
387
|
+
投稿した内容が表示されないというのは
|
388
|
+
|
389
|
+
MessageItem内の{this.props.message.user}の部分に
|
390
|
+
|
391
|
+
データがうまく渡っていないのでしょうか。。。
|
392
|
+
|
393
|
+
|
394
|
+
|
395
|
+
とりとめのない追記で申し訳ありませんが、見ていただけると大変助かります。
|
396
|
+
|
397
|
+
|
398
|
+
|
399
|
+
###さらに追記 01/17
|
400
|
+
|
401
|
+
コメントにいただいたように、success:の中でconsole.log(message)を記載してchromeで確認をしました。
|
402
|
+
|
403
|
+
|
404
|
+
|
405
|
+
htmlが吐き出されているようで、かなり長いログになっていました。。
|
406
|
+
|
407
|
+
※あまりに長いので、一部省略しています。
|
408
|
+
|
409
|
+
|
410
|
+
|
411
|
+
```
|
412
|
+
|
413
|
+
<!DOCTYPE html>
|
414
|
+
|
415
|
+
<html>
|
416
|
+
|
417
|
+
<head>
|
418
|
+
|
419
|
+
<title>Ruby on Rails Tutorial Sample App</title>
|
420
|
+
|
421
|
+
<link rel="stylesheet" media="all" href="/assets/account_activations.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
|
422
|
+
|
423
|
+
|
424
|
+
|
425
|
+
中略
|
426
|
+
|
427
|
+
|
428
|
+
|
429
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
|
430
|
+
|
431
|
+
</script>
|
432
|
+
|
433
|
+
<![endif]-->
|
434
|
+
|
435
|
+
|
436
|
+
|
437
|
+
</head>
|
438
|
+
|
439
|
+
<body style="color: rgb(27, 29, 34)">
|
440
|
+
|
441
|
+
<header class="navbar navbar-inverse">
|
442
|
+
|
443
|
+
<div class="container" style="margin-top: 100px;">
|
444
|
+
|
445
|
+
<a id="logo" href="/home">sample app</a>
|
446
|
+
|
447
|
+
<nav>
|
448
|
+
|
449
|
+
<ul class="nav navbar-nav navbar-right">
|
450
|
+
|
451
|
+
<li><a href="/home">Home</a></li>
|
452
|
+
|
453
|
+
<li><a href="/help">Help</a></li>
|
454
|
+
|
455
|
+
<li><a href="/users">Users</a></li>
|
456
|
+
|
457
|
+
<li class="dropdown">
|
458
|
+
|
459
|
+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
460
|
+
|
461
|
+
Account <b class="caret"></b>
|
462
|
+
|
463
|
+
</a>
|
464
|
+
|
465
|
+
<ul class="dropdown-menu">
|
466
|
+
|
467
|
+
<li><a href="/users/103">Profile</a></li>
|
468
|
+
|
469
|
+
<li><a href="#">Settings</a></li>
|
470
|
+
|
471
|
+
<li class="divider"></li>
|
472
|
+
|
473
|
+
<li>
|
474
|
+
|
475
|
+
<a rel="nofollow" data-method="delete" href="/logout">Log out</a>
|
476
|
+
|
477
|
+
</li>
|
478
|
+
|
479
|
+
</ul>
|
480
|
+
|
481
|
+
</li>
|
482
|
+
|
483
|
+
</ul>
|
484
|
+
|
485
|
+
</nav>
|
486
|
+
|
487
|
+
</div>
|
488
|
+
|
489
|
+
</header>
|
490
|
+
|
491
|
+
|
492
|
+
|
493
|
+
<div class="landing">
|
494
|
+
|
495
|
+
<div class="alert alert-success">Micropost created!</div>
|
496
|
+
|
497
|
+
<div class="container">
|
498
|
+
|
499
|
+
<div class="row col-md-12">
|
500
|
+
|
501
|
+
<h1>
|
502
|
+
|
503
|
+
<section class="user_info">
|
504
|
+
|
505
|
+
<a href="/users/103"><img alt="example_sample@example.com" class="gravatar" src="https://secure.gravatar.com/avatar/1a51ab8ceafa101e9b36619b6c9b277d?s=80" /></a>
|
506
|
+
|
507
|
+
<h1>example_sample@example.com</h1>
|
508
|
+
|
509
|
+
<span><a href="/users/103">view my profile</a></span>
|
510
|
+
|
511
|
+
<span>84 microposts</span>
|
512
|
+
|
513
|
+
|
514
|
+
|
515
|
+
<div class="stats">
|
516
|
+
|
517
|
+
<a href="/users/103/following">
|
518
|
+
|
519
|
+
<a id="following" class="stat">
|
520
|
+
|
521
|
+
1
|
522
|
+
|
523
|
+
following
|
524
|
+
|
525
|
+
</a>
|
526
|
+
|
527
|
+
</a>
|
528
|
+
|
529
|
+
<a href="/users/103/followers">
|
530
|
+
|
531
|
+
<a id="followers" class="stat">
|
532
|
+
|
533
|
+
0
|
534
|
+
|
535
|
+
followers
|
536
|
+
|
537
|
+
</a>
|
538
|
+
|
539
|
+
</a>
|
540
|
+
|
541
|
+
|
542
|
+
|
543
|
+
中略
|
544
|
+
|
545
|
+
|
546
|
+
|
547
|
+
<li id="micropost-377">
|
548
|
+
|
549
|
+
<button class="btn-old-micropost">
|
550
|
+
|
551
|
+
<span class="content">
|
552
|
+
|
553
|
+
ててて
|
554
|
+
|
555
|
+
|
556
|
+
|
557
|
+
</span>
|
558
|
+
|
559
|
+
<span class="timestamp">
|
560
|
+
|
561
|
+
Posted 3 days ago.
|
562
|
+
|
563
|
+
</span>
|
564
|
+
|
565
|
+
</button>
|
566
|
+
|
567
|
+
</li>
|
568
|
+
|
569
|
+
|
570
|
+
|
571
|
+
|
572
|
+
|
573
|
+
中略
|
574
|
+
|
575
|
+
|
576
|
+
|
577
|
+
|
578
|
+
|
579
|
+
<!-- <form class="new_micropost" id="new_micropost" enctype="multipart/form-data" action="/microposts" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="vvuS1FJiYVwCMOusHRscYXar2GxZDCMWhRbDkThP4ZyL9FOsoVrVXj5fl6WCZ4LCsLevKALMO33RCkdBJ8yWDQ==" />
|
580
|
+
|
581
|
+
|
582
|
+
|
583
|
+
<div class="field">
|
584
|
+
|
585
|
+
<textarea placeholder="Compose new micropost..." name="micropost[content]" id="micropost_content">
|
586
|
+
|
587
|
+
</textarea>
|
588
|
+
|
589
|
+
</div>
|
590
|
+
|
591
|
+
|
592
|
+
|
593
|
+
<input type="submit" name="commit" value="creat" class="btn-post" />
|
594
|
+
|
595
|
+
|
596
|
+
|
597
|
+
<span class="picture">
|
598
|
+
|
599
|
+
<input accept="image/jpeg.iamge/gif,image/png" type="file" name="micropost[picture]" id="micropost_picture" />
|
600
|
+
|
601
|
+
</span>
|
602
|
+
|
603
|
+
</form> -->
|
604
|
+
|
605
|
+
|
606
|
+
|
607
|
+
<!-- <script type="text/javascript">
|
608
|
+
|
609
|
+
$('#micropost_picture').bind('change', function() {
|
610
|
+
|
611
|
+
var size_in_megabytes = this.files[0].size/1024/1024;
|
612
|
+
|
613
|
+
if (size_in_megabytes > 5) {
|
614
|
+
|
615
|
+
alert('Maximum file size is 5MB. Please choose a smaller file.');
|
616
|
+
|
617
|
+
}
|
618
|
+
|
619
|
+
});
|
620
|
+
|
621
|
+
</script> -->
|
622
|
+
|
623
|
+
|
624
|
+
|
625
|
+
</section>
|
626
|
+
|
627
|
+
<div data-react-class="MessageBox" data-react-props="{}"></div>
|
258
628
|
|
259
629
|
</div>
|
260
630
|
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
});
|
338
|
-
|
339
|
-
```
|
340
|
-
|
341
|
-
上記から下記に書き換えてみました。
|
342
|
-
|
343
|
-
「サンプル」というテキストを追加しています。
|
344
|
-
|
345
|
-
```
|
346
|
-
|
347
|
-
var MessageItem = React.createClass ({
|
348
|
-
|
349
|
-
render: function() {
|
350
|
-
|
351
|
-
return (
|
352
|
-
|
353
|
-
<div className="message">
|
354
|
-
|
355
|
-
<h2 className="messageUser">サンプル{this.props.message.user}</h2>
|
356
|
-
|
357
|
-
</div>
|
358
|
-
|
359
|
-
);
|
360
|
-
|
361
|
-
}
|
362
|
-
|
363
|
-
});
|
364
|
-
|
365
|
-
```
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
![イメージ説明](fbb1a9fee22f219ed6faed3bdf0c744e.png)
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
その後、実際に動かしてみると、Postボタンをタップする前には
|
374
|
-
|
375
|
-
上記のスクショのようになっているところ、
|
376
|
-
|
377
|
-
Postボタンタップ後に下記のスクショのように
|
378
|
-
|
379
|
-
「サンプル」というテキストが表示されました。
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
![イメージ説明](7e4a1795703fab56f635b05b0af30f44.png)
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
これでMessageItemが呼び出されていることは分かったのですが、
|
388
|
-
|
389
|
-
投稿した内容が表示されないというのは
|
390
|
-
|
391
|
-
MessageItem内の{this.props.message.user}の部分に
|
392
|
-
|
393
|
-
データがうまく渡っていないのでしょうか。。。
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
とりとめのない追記で申し訳ありませんが、見ていただけると大変助かります。
|
631
|
+
</div>
|
632
|
+
|
633
|
+
</div>
|
634
|
+
|
635
|
+
|
636
|
+
|
637
|
+
<footer class="footer">
|
638
|
+
|
639
|
+
<small>
|
640
|
+
|
641
|
+
The <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
|
642
|
+
|
643
|
+
by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
|
644
|
+
|
645
|
+
</small>
|
646
|
+
|
647
|
+
<nav>
|
648
|
+
|
649
|
+
<ul>
|
650
|
+
|
651
|
+
<li><a href="/about">About</a></li>
|
652
|
+
|
653
|
+
<li><a href="/contact">Contact</a></li>
|
654
|
+
|
655
|
+
<li><a href="http://news.railstutorial.org/">News</a></li>
|
656
|
+
|
657
|
+
</ul>
|
658
|
+
|
659
|
+
</nav>
|
660
|
+
|
661
|
+
</footer>
|
662
|
+
|
663
|
+
|
664
|
+
|
665
|
+
<pre class="debug_dump">--- !ruby/hash:ActionController::Parameters
|
666
|
+
|
667
|
+
controller: static_pages
|
668
|
+
|
669
|
+
action: home
|
670
|
+
|
671
|
+
</pre>
|
672
|
+
|
673
|
+
</div>
|
674
|
+
|
675
|
+
</body>
|
676
|
+
|
677
|
+
</html>
|
678
|
+
|
679
|
+
```
|
680
|
+
|
681
|
+
|
682
|
+
|
683
|
+
また、chromeのconsoleをみると、もう一つエラーが表示されていました。
|
684
|
+
|
685
|
+
|
686
|
+
|
687
|
+
```
|
688
|
+
|
689
|
+
micropost.self-560a548….js?body=1:19 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0"
|
690
|
+
|
691
|
+
```
|
692
|
+
|
693
|
+
コードの該当部分は、POSTのajax内のerror:、下記の部分のようです。
|
694
|
+
|
695
|
+
|
696
|
+
|
697
|
+
```
|
698
|
+
|
699
|
+
console.error(this.props.url, status, err.toString());
|
700
|
+
|
701
|
+
```
|
702
|
+
|
703
|
+
|
704
|
+
|
705
|
+
よろしくお願いします。
|
3
誤字修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -304,7 +304,7 @@
|
|
304
304
|
|
305
305
|
|
306
306
|
|
307
|
-
302が
|
307
|
+
302が返ってきているようなのですが、これが問題なのでしょうか、、
|
308
308
|
|
309
309
|
|
310
310
|
|
2
サーバーログと、新たに気付いた点を追記
test
CHANGED
File without changes
|
test
CHANGED
@@ -267,3 +267,131 @@
|
|
267
267
|
```
|
268
268
|
|
269
269
|
必要な情報などあれば、いっていただけると助かります。
|
270
|
+
|
271
|
+
|
272
|
+
|
273
|
+
|
274
|
+
|
275
|
+
###追記
|
276
|
+
|
277
|
+
|
278
|
+
|
279
|
+
編集依頼にいただいた内容ですが、handleMessageSubmitが実行された際には、下記のサーバーログが残っていました。
|
280
|
+
|
281
|
+
|
282
|
+
|
283
|
+
```
|
284
|
+
|
285
|
+
Started POST "/microposts" for ::1 at 2017-01-16 19:48:46 +0900
|
286
|
+
|
287
|
+
Processing by MicropostsController#create as */*
|
288
|
+
|
289
|
+
Parameters: {"micropost"=>{"content"=>"サンプル"}}
|
290
|
+
|
291
|
+
User Load (1.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1 [["id", 103]]
|
292
|
+
|
293
|
+
(0.5ms) begin transaction
|
294
|
+
|
295
|
+
SQL (3.0ms) INSERT INTO "microposts" ("content", "user_id", "created_at", "updated_at") VALUES (?, ?, ?, ?) [["content", "サンプル"], ["user_id", 103], ["created_at", "2017-01-16 10:48:46.294594"], ["updated_at", "2017-01-16 10:48:46.294594"]]
|
296
|
+
|
297
|
+
(0.9ms) commit transaction
|
298
|
+
|
299
|
+
Redirected to http://localhost:3000/home
|
300
|
+
|
301
|
+
Completed 302 Found in 59ms (ActiveRecord: 5.5ms)
|
302
|
+
|
303
|
+
```
|
304
|
+
|
305
|
+
|
306
|
+
|
307
|
+
302が帰ってきているようなのですが、これは挙動できに問題となるのでしょうか、、
|
308
|
+
|
309
|
+
|
310
|
+
|
311
|
+
|
312
|
+
|
313
|
+
もう1点、MessageItemの動きを調べている時に気づいた点があったので記載します。
|
314
|
+
|
315
|
+
|
316
|
+
|
317
|
+
まず、MessageItemが呼び出されていないかも、と思ったので、MessageItemメソッドの中身を
|
318
|
+
|
319
|
+
```
|
320
|
+
|
321
|
+
var MessageItem = React.createClass ({
|
322
|
+
|
323
|
+
render: function() {
|
324
|
+
|
325
|
+
return (
|
326
|
+
|
327
|
+
<div className="message">
|
328
|
+
|
329
|
+
<h2 className="messageUser">{this.props.message.user}</h2>
|
330
|
+
|
331
|
+
</div>
|
332
|
+
|
333
|
+
);
|
334
|
+
|
335
|
+
}
|
336
|
+
|
337
|
+
});
|
338
|
+
|
339
|
+
```
|
340
|
+
|
341
|
+
上記から下記に書き換えてみました。
|
342
|
+
|
343
|
+
「サンプル」というテキストを追加しています。
|
344
|
+
|
345
|
+
```
|
346
|
+
|
347
|
+
var MessageItem = React.createClass ({
|
348
|
+
|
349
|
+
render: function() {
|
350
|
+
|
351
|
+
return (
|
352
|
+
|
353
|
+
<div className="message">
|
354
|
+
|
355
|
+
<h2 className="messageUser">サンプル{this.props.message.user}</h2>
|
356
|
+
|
357
|
+
</div>
|
358
|
+
|
359
|
+
);
|
360
|
+
|
361
|
+
}
|
362
|
+
|
363
|
+
});
|
364
|
+
|
365
|
+
```
|
366
|
+
|
367
|
+
|
368
|
+
|
369
|
+
![イメージ説明](fbb1a9fee22f219ed6faed3bdf0c744e.png)
|
370
|
+
|
371
|
+
|
372
|
+
|
373
|
+
その後、実際に動かしてみると、Postボタンをタップする前には
|
374
|
+
|
375
|
+
上記のスクショのようになっているところ、
|
376
|
+
|
377
|
+
Postボタンタップ後に下記のスクショのように
|
378
|
+
|
379
|
+
「サンプル」というテキストが表示されました。
|
380
|
+
|
381
|
+
|
382
|
+
|
383
|
+
![イメージ説明](7e4a1795703fab56f635b05b0af30f44.png)
|
384
|
+
|
385
|
+
|
386
|
+
|
387
|
+
これでMessageItemが呼び出されていることは分かったのですが、
|
388
|
+
|
389
|
+
投稿した内容が表示されないというのは
|
390
|
+
|
391
|
+
MessageItem内の{this.props.message.user}の部分に
|
392
|
+
|
393
|
+
データがうまく渡っていないのでしょうか。。。
|
394
|
+
|
395
|
+
|
396
|
+
|
397
|
+
とりとめのない追記で申し訳ありませんが、見ていただけると大変助かります。
|
1
分かりやすくアップデート
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
Railsアプリ
|
1
|
+
Railsアプリ、reactでPOSTした内容を表示したい
|
test
CHANGED
@@ -26,7 +26,7 @@
|
|
26
26
|
|
27
27
|
|
28
28
|
|
29
|
-
このスクリーンショット内の、
|
29
|
+
このスクリーンショット内の、テキストフォームの「POST」というテキストを
|
30
30
|
|
31
31
|
POSTボタンがクリックされた後にテキストフォームの上あたりに表示したいのですが
|
32
32
|
|