teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問React material-uiのDateTimePickersの値をパラメーターとして送信したい

編集履歴

質問編集履歴

4

DateTimePicekers.jsx内のコードの修正

2021/02/23 03:48

投稿

kazumo24
kazumo24

スコア2

test CHANGED
File without changes
test CHANGED
@@ -416,45 +416,17 @@
416
416
 
417
417
 
418
418
 
419
- import React,{ useState } from 'react';
420
-
421
- import { makeStyles } from '@material-ui/core/styles';
422
-
423
- import TextField from '@material-ui/core/TextField';
424
-
425
-
426
-
427
- const useStyles = makeStyles((theme) => ({
428
-
429
- container: {
430
-
431
- display: 'flex',
432
-
433
- flexWrap: 'wrap',
434
-
435
- },
436
-
437
- textField: {
438
-
439
- marginLeft: theme.spacing(1),
440
-
441
- marginRight: theme.spacing(1),
442
-
443
- width: 200,
444
-
445
- },
446
-
447
- }));
448
-
449
-
450
-
451
419
  const DateTimePickers = () => {
452
420
 
453
421
  const classes = useStyles();
454
422
 
455
- const [selectedDatetime, handleDateChange] = useState(Date.today);
423
+ const [selectedDatetime, setSelectedDatetime] = useState(Date.today);
424
+
456
-
425
+ const handleDateChange = (datetime) => {
426
+
457
-
427
+ setSelectedDatetime(datetime);
428
+
429
+ };
458
430
 
459
431
  return (
460
432
 
@@ -468,7 +440,7 @@
468
440
 
469
441
  value={selectedDatetime}
470
442
 
471
- onChange={e => handleDateChange(e.target.value)}
443
+ onChange={handleDateChange}
472
444
 
473
445
  className={classes.textField}
474
446
 

3

コントローラーのソースコード追加、解決したいこと追記

2021/02/23 03:47

投稿

kazumo24
kazumo24

スコア2

test CHANGED
File without changes
test CHANGED
@@ -12,15 +12,35 @@
12
12
 
13
13
 
14
14
 
15
- ###エラー分
15
+ ###解決したいこと
16
+
16
-
17
+ エラーは出ていませんが、予約をするRooms.jsx内メソッドの、submitReserveが走ると、
18
+
19
+ ディベロッパーツールのNetworkのPreviewで
20
+
17
- ```
21
+ ```
18
-
22
+
19
- src/components/Forms/DateTimePickers.jsx
23
+ active: true
24
+
20
-
25
+ build_id: 2
26
+
27
+ count: 5
28
+
21
- Line 25:16: 'state' is not defined no-undef
29
+ created_at: "2021-02-23T01:10:16.925Z"
30
+
22
-
31
+ datetime: null
32
+
33
+ id: 4
34
+
35
+ ~~以下略~~
36
+
23
- ```
37
+ ```
38
+
39
+ のようにDateTimePicerに入力された値であるdatetimeがnullになってしまいます。
40
+
41
+ これを正常に値が入るようにしたいです。
42
+
43
+
24
44
 
25
45
 
26
46
 
@@ -36,6 +56,146 @@
36
56
 
37
57
 
38
58
 
59
+ ```ruby
60
+
61
+ #pre_reserveコントローラー
62
+
63
+ class PreReservesController < ApplicationController
64
+
65
+ before_action :set_room, only: %i[create replace]
66
+
67
+
68
+
69
+ def index
70
+
71
+ ~~~略~~~~
72
+
73
+ end
74
+
75
+
76
+
77
+ def create
78
+
79
+ if PreReserve.active.other_build(@reserved_room.build.id).exists?
80
+
81
+ return render json: {
82
+
83
+ existing_build: PreReserve.other_build(@reserved_room.build.id).first.build.name,
84
+
85
+ new_build: Room.find(params[:room_id]).build.name,
86
+
87
+ }, status: :not_acceptable
88
+
89
+ end
90
+
91
+
92
+
93
+ def replace
94
+
95
+ PreReserve.active.other_build(@oreserved_room.build.id).each do |pre_reserve|
96
+
97
+ pre_reserve.update_attribute(:active, false)
98
+
99
+ end
100
+
101
+
102
+
103
+ set_pre_reserve(@reserved_room)
104
+
105
+
106
+
107
+ if @pre_reserve.save
108
+
109
+ render json: {
110
+
111
+ pre_reserve: @pre_reserve
112
+
113
+ }, status: :created
114
+
115
+ else
116
+
117
+ render json: {}, status: :internal_server_error
118
+
119
+ end
120
+
121
+ end
122
+
123
+
124
+
125
+ set_pre_reserve(@reserved_room)
126
+
127
+
128
+
129
+ if @pre_reserve.save
130
+
131
+ render json: {
132
+
133
+ pre_reserve: @pre_reserve
134
+
135
+ }, status: :created
136
+
137
+ else
138
+
139
+ render json: {}, status: :internal_server_error
140
+
141
+ end
142
+
143
+ end
144
+
145
+
146
+
147
+ private
148
+
149
+
150
+
151
+ def set_room
152
+
153
+ @reserved_room = Room.find(params[:room_id])
154
+
155
+ end
156
+
157
+
158
+
159
+ def set_pre_reserve(reserved_room)
160
+
161
+ if reserved_room.pre_reserve.present?
162
+
163
+ @pre_reserve = reserved_room.pre_reserve
164
+
165
+ @pre_reserve.attributes = {
166
+
167
+ count: reserved_room.pre_reserve.count + params[:count],
168
+
169
+ datetime: reserved_room.pre_reserve.datetime,
170
+
171
+ active: true
172
+
173
+ }
174
+
175
+ else
176
+
177
+ @pre_reserve = reserved_room.build_pre_reserve(
178
+
179
+ count: params[:count],
180
+
181
+ datetime: params[:datetime],
182
+
183
+ build: reserved_room.build,
184
+
185
+ active: true
186
+
187
+ )
188
+
189
+ end
190
+
191
+ end
192
+
193
+ end
194
+
195
+ ```
196
+
197
+
198
+
39
199
  ```jsx
40
200
 
41
201
  #Rooms.jsx
@@ -194,7 +354,7 @@
194
354
 
195
355
  selectedRoom: null,
196
356
 
197
- selectedDatetime: Date.today,
357
+ selectedDatetime: selectedDatetime
198
358
 
199
359
  selectedTimeCount: 1,
200
360
 
@@ -226,8 +386,6 @@
226
386
 
227
387
  countNumber,
228
388
 
229
- handleDateChange,
230
-
231
389
  onClickCountUp,
232
390
 
233
391
  onClickCountDown,
@@ -240,11 +398,7 @@
240
398
 
241
399
  ~略~
242
400
 
243
- <DateTimePickers
401
+ <DateTimePickers/>
244
-
245
- onChange={() => handleDateChange()}
246
-
247
- />
248
402
 
249
403
  ~略~
250
404
 
@@ -262,7 +416,7 @@
262
416
 
263
417
 
264
418
 
265
- import React from 'react';
419
+ import React,{ useState } from 'react';
266
420
 
267
421
  import { makeStyles } from '@material-ui/core/styles';
268
422
 
@@ -294,15 +448,17 @@
294
448
 
295
449
 
296
450
 
297
- export default function DateTimePickers() {
451
+ const DateTimePickers = () => {
298
452
 
299
453
  const classes = useStyles();
300
454
 
455
+ const [selectedDatetime, handleDateChange] = useState(Date.today);
456
+
301
457
 
302
458
 
303
459
  return (
304
460
 
305
- <form className={classes.container} noValidate>
461
+ <form>
306
462
 
307
463
  <TextField
308
464
 
@@ -310,26 +466,78 @@
310
466
 
311
467
  type="datetime-local"
312
468
 
313
- value={state.setDatetime}
469
+ value={selectedDatetime}
470
+
471
+ onChange={e => handleDateChange(e.target.value)}
314
472
 
315
473
  className={classes.textField}
316
474
 
317
475
  />
318
476
 
319
- </form>
477
+ </form>
320
478
 
321
479
  );
322
480
 
323
481
  }
324
482
 
483
+
484
+
485
+ export default DateTimePickers;
486
+
487
+ ```
488
+
489
+
490
+
491
+ ```js
492
+
493
+ #prereserve.js
494
+
495
+ import axios from 'axios';
496
+
497
+ import { PreReserve, PreReserveReplace } from '../urls/index'
498
+
499
+
500
+
501
+ #axiosを用いてapiを呼ぶ処理
502
+
503
+
504
+
505
+ export const postPreReserve =(params) => {
506
+
507
+ return axios.post(PreReserve,
508
+
509
+ {
510
+
511
+ room_id: params.roomId,
512
+
513
+ count: params.count,
514
+
515
+ datetime: params.datetime, #エディタ上で"datetime": Unknownwordと表示されます。ここが原因...??
516
+
517
+ }
518
+
519
+ )
520
+
521
+ .then(res => {
522
+
523
+ return res.data
524
+
525
+ })
526
+
527
+ .catch((e) => { throw e; })
528
+
529
+ };
530
+
325
531
  ```
326
532
 
327
533
 
328
534
 
329
535
  ### 試したこと
330
536
 
331
- selectedDateTimeを変更するというコードをデートタイムstate.setDatetimeにするというコードを書いたためDateTimePickers.jsxのvalueもstate.setDatetimeとしましたが、エラー分の通りになってしまいました。
332
-
333
- stateを定義すればよいはずですが、どのように定義すればいいのか分かりません。
537
+ DatetimePickers.jsx内でuseStateを用い、関数を渡す処理にしてみましたが、挙動に変化ありませんでした。
538
+
539
+
540
+
541
+
334
542
 
335
543
  お手数をおかけしますがお力添えの方、よろしくお願い致します。

2

コントローラーのソースコード追加、解決したいこと追記

2021/02/23 02:28

投稿

kazumo24
kazumo24

スコア2

test CHANGED
@@ -1 +1 @@
1
- React material-uiのDateTimePickersの値をパラメーターとして送信したい【編集】
1
+ React material-uiのDateTimePickersの値をパラメーターとして送信したい
test CHANGED
File without changes

1

コントローラーのソースコード追加、解決したいこと追記

2021/02/23 02:27

投稿

kazumo24
kazumo24

スコア2

test CHANGED
@@ -1 +1 @@
1
- React material-uiのDateTimePickersのvalueをパラメーターとして送信したい
1
+ React material-uiのDateTimePickersの値をパラメーターとして送信したい【編集】
test CHANGED
File without changes