質問編集履歴

4

質問のついき

2021/04/28 14:00

投稿

yaha4967
yaha4967

スコア106

test CHANGED
@@ -1 +1 @@
1
- サーバーデータを送りた
1
+ 文字入力する度onClickが働てしまう
test CHANGED
@@ -1,11 +1,3 @@
1
- ##したいこと
2
-
3
- ログイン処理を実装したいです。
4
-
5
- ログイン処理をするためにユーザーからEmailとパスワードを入力してもらってサーバーに送りたいのですがやり方がわかりません。
6
-
7
-
8
-
9
1
  ##開発環境
10
2
 
11
3
  サーバーサイド: Rails,
@@ -14,286 +6,104 @@
14
6
 
15
7
 
16
8
 
17
- ##したこと
9
+ ##したこと
10
+
11
+ ボタンが押されたときに、フォームの内容をAPIに送信したいです!
18
12
 
19
13
 
20
14
 
21
- stateでemailとパスワードを保持してonSubmitが起きた時バーにそれら送る。。。とうつもりで以下のコード書いてみした
15
+ buttonのonClickイベント、APIにデわたす関数を当てていま
22
16
 
23
17
 
24
18
 
19
+ 一応、このコードでも送信はできているのですが文字入力をするたびにAPIに送信されてしまいます。
20
+
21
+
22
+
25
- かしonSubmitのきに使う関数HandleSubmit働いないようでサーバーがらなす。
23
+ 文字入力中に意図せず送信されてまうデータはちゃん中身あるのですが、ボタンを押し送信した時の値は空になってしまってす。
26
24
 
27
25
 
28
26
 
29
27
 
30
28
 
31
- 何かいただけると嬉しいです。よろしくお願いします。
29
+ どうすれば、buttonのクリックだけでデータを送信できるでしょうか。また、何か試すと良い事などあればえていただきたいです。
32
30
 
33
31
 
34
32
 
35
-
36
-
37
- 以下、余計だと思うコードは省いて書かせていただきます。
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
- メイン
46
-
47
33
  ```jsx
48
34
 
49
- import {postLogin} from '../apis/login.jsx';
50
-
51
-
52
-
53
- import {
54
-
55
- initialState,
56
-
57
- loginActionTypes,
58
-
59
- loginReducer
60
-
61
- } from '../reducers/login.jsx';
62
-
63
-
64
-
65
-
66
-
67
- export const Login = () => {
68
-
69
-
70
-
71
-
72
-
73
-
74
-
75
- const [state, dispatch] = useReducer(loginReducer, initialState);
76
-
77
-
78
-
79
- const handleChangeEmail = (e) => {
80
-
81
- console.log(`${e.target.value}`)
82
-
83
- dispatch({
84
-
85
- type: loginActionTypes.WRITING,
86
-
87
- email: e.target.value
88
-
89
- });
90
-
91
- }
92
-
93
- const handleChangePassword = (e) => {
94
-
95
- dispatch({
96
-
97
- type: loginActionTypes.WRITING,
98
-
99
- password: e.target.value
100
-
101
- });
102
-
103
- }
104
-
105
-
106
-
107
- //ここのconsole.logが出力されないので恐らくHundleSubmitが動いてないのかなと思います。
108
-
109
- const HandleSubmit = () =>{
110
-
111
- console.log("handlesubmitt")
112
-
113
- useEffect(() =>{
35
+ <form>
114
-
115
- dispatch({type: loginActionTypes.FETCHING});
116
-
117
- postLogin({
118
-
119
- email: state.email,
120
-
121
- password: state.password,
122
-
123
- })
124
-
125
- .then((data) =>
126
-
127
- dispatch({type: loginActionTypes.FETCH_SUCCESS})
128
-
129
- )
130
-
131
- },[])
132
-
133
- }
134
-
135
-
136
-
137
- return (
138
-
139
-
140
-
141
- <form onSubmit={HandleSubmit}>
142
36
 
143
37
 
144
38
 
145
39
  <FormWrapper>
146
40
 
147
- <TextFieldWrapper>
41
+ <TextFieldWrapper>
148
42
 
149
- <TextField
43
+ <TextField
150
44
 
151
- value={state.email}
45
+ id="standard-search"
152
46
 
153
- onChange={handleChangeEmail}
47
+ label="Email"
154
48
 
155
- />
49
+ name="email"
156
50
 
157
- </TextFieldWrapper>
51
+ value={state.email}
158
52
 
159
- <TextFieldWrapper>
53
+ onChange={handleChangeEmail}
160
54
 
161
- <TextField
55
+ />
162
56
 
163
- type="password"
57
+ </TextFieldWrapper>
164
58
 
165
- value={state.password}
59
+ <TextFieldWrapper>
166
60
 
167
- onChange={handleChangePassword}
61
+ <TextField
168
62
 
169
- />
63
+ id="standard-password-input"
170
64
 
171
- </TextFieldWrapper>
65
+ label="Password"
172
66
 
173
- <ButtonWrapper>
67
+ type="password"
174
68
 
69
+ autoComplete="current-password"
70
+
71
+ name="password"
72
+
73
+ value={state.password}
74
+
75
+ onChange={handleChangePassword}
76
+
77
+ />
78
+
79
+ </TextFieldWrapper>
80
+
81
+ <ButtonWrapper>
82
+
175
- <Button variant="contained" color="primary" type="submit">
83
+ <Button variant="contained" color="primary" type="submit" onClick={postLogin(
84
+
85
+ {
86
+
87
+ email:state.email,
88
+
89
+ password: state.password
90
+
91
+ })}>
176
92
 
177
93
  ログイン
178
94
 
179
- </Button>
95
+ </Button>
180
96
 
181
- </ButtonWrapper>
97
+ </ButtonWrapper>
182
98
 
183
- </FormWrapper>
99
+ </FormWrapper>
184
100
 
185
101
 
186
102
 
187
- </form>
103
+ </form>
188
-
189
- )
190
-
191
- }
192
104
 
193
105
  ```
194
106
 
195
107
 
196
108
 
197
- APIにアクセスする部分
198
-
199
-
200
-
201
- ```jsx
202
-
203
- import { login } from '../urls/index'
204
-
205
-
206
-
207
- export const postLogin = (params) =>{
208
-
209
- return axios.post(login,
210
-
211
- {
212
-
213
- email: params.email,
214
-
215
- password: params.password
216
-
217
- }
218
-
219
- )
220
-
221
- .then(res => {
222
-
223
- return res.data
224
-
225
- })
226
-
227
- };
228
-
229
- ```
230
-
231
-
232
-
233
- APIのurl
234
-
235
-
236
-
237
- ```js
238
-
239
- const DEFAULT_API_LOCALHOST = 'http://localhost:3000/api/v1';
240
-
241
-
242
-
243
- export const login = `${DEFAULT_API_LOCALHOST}/login`
244
-
245
- ```
246
-
247
-
248
-
249
- Railsのusers_controller、ログイン処理するAPI。
250
-
251
-
252
-
253
- ```ruby
254
-
255
- module Api
256
-
257
- module V1
258
-
259
- class UsersController < ApplicationController
260
-
261
-
262
-
263
- def login
264
-
265
- user = User.find_by(email: params[:email], password: params[:password])
266
-
267
- if params[:session] = user.id
268
-
269
- puts "success!!"
270
-
271
- render json: {}, status: :ok
272
-
273
- else
274
-
275
- puts "missed!!!"
276
-
277
- render json: {}, status: :internal_server_error
278
-
279
- end
280
-
281
- end
282
-
283
-
284
-
285
- end
286
-
287
- end
288
-
289
- end
290
-
291
-
292
-
293
- ```
294
-
295
-
296
-
297
-
298
-
299
- よろしくおいします。
109
+ よろしくおねがいします。

3

分かりやすく書き直した

2021/04/28 14:00

投稿

yaha4967
yaha4967

スコア106

test CHANGED
File without changes
test CHANGED
@@ -194,7 +194,7 @@
194
194
 
195
195
 
196
196
 
197
- API
197
+ APIにアクセスする部分
198
198
 
199
199
 
200
200
 
@@ -230,7 +230,7 @@
230
230
 
231
231
 
232
232
 
233
- url
233
+ APIのurl
234
234
 
235
235
 
236
236
 
@@ -246,7 +246,7 @@
246
246
 
247
247
 
248
248
 
249
- users_controller
249
+ Railsのusers_controller、ログイン処理するAPI。
250
250
 
251
251
 
252
252
 

2

質問文を見やすくなるよう書き直した。

2021/04/28 09:09

投稿

yaha4967
yaha4967

スコア106

test CHANGED
File without changes
test CHANGED
@@ -1,11 +1,17 @@
1
+ ##したいこと
2
+
1
- サーバーサドはRails, フロトエンドはReact hooksつかってす。
3
+ ログイン処理実装したす。
2
-
3
-
4
4
 
5
5
  ログイン処理をするためにユーザーからEmailとパスワードを入力してもらってサーバーに送りたいのですがやり方がわかりません。
6
6
 
7
7
 
8
8
 
9
+ ##開発環境
10
+
11
+ サーバーサイド: Rails,
12
+
13
+ フロントエンド: React hooksをつかっています。create-react-appベースです。
14
+
9
15
 
10
16
 
11
17
  ##試したこと

1

初心者マークとコードの追加

2021/04/28 09:06

投稿

yaha4967
yaha4967

スコア106

test CHANGED
File without changes
test CHANGED
@@ -32,6 +32,12 @@
32
32
 
33
33
 
34
34
 
35
+
36
+
37
+
38
+
39
+ メイン
40
+
35
41
  ```jsx
36
42
 
37
43
  import {postLogin} from '../apis/login.jsx';
@@ -179,3 +185,109 @@
179
185
  }
180
186
 
181
187
  ```
188
+
189
+
190
+
191
+ API
192
+
193
+
194
+
195
+ ```jsx
196
+
197
+ import { login } from '../urls/index'
198
+
199
+
200
+
201
+ export const postLogin = (params) =>{
202
+
203
+ return axios.post(login,
204
+
205
+ {
206
+
207
+ email: params.email,
208
+
209
+ password: params.password
210
+
211
+ }
212
+
213
+ )
214
+
215
+ .then(res => {
216
+
217
+ return res.data
218
+
219
+ })
220
+
221
+ };
222
+
223
+ ```
224
+
225
+
226
+
227
+ url
228
+
229
+
230
+
231
+ ```js
232
+
233
+ const DEFAULT_API_LOCALHOST = 'http://localhost:3000/api/v1';
234
+
235
+
236
+
237
+ export const login = `${DEFAULT_API_LOCALHOST}/login`
238
+
239
+ ```
240
+
241
+
242
+
243
+ users_controller
244
+
245
+
246
+
247
+ ```ruby
248
+
249
+ module Api
250
+
251
+ module V1
252
+
253
+ class UsersController < ApplicationController
254
+
255
+
256
+
257
+ def login
258
+
259
+ user = User.find_by(email: params[:email], password: params[:password])
260
+
261
+ if params[:session] = user.id
262
+
263
+ puts "success!!"
264
+
265
+ render json: {}, status: :ok
266
+
267
+ else
268
+
269
+ puts "missed!!!"
270
+
271
+ render json: {}, status: :internal_server_error
272
+
273
+ end
274
+
275
+ end
276
+
277
+
278
+
279
+ end
280
+
281
+ end
282
+
283
+ end
284
+
285
+
286
+
287
+ ```
288
+
289
+
290
+
291
+
292
+
293
+ よろしくお願いします。