teratail
回答率
85.46%
質問するログイン新規登録
トップに関する質問フォームにて、入力値が３文字以上ででsaveボタン押せるようにdisabledを入れたい

編集履歴

質問編集履歴

5

Content.jsにてsetCheckNameが送られていないことに気がつき、修正

2021/01/11 11:36

投稿

yuki-o0413
yuki-o0413

スコア8

test CHANGED
File without changes
test CHANGED
@@ -34,8 +34,6 @@
34
34
 
35
35
  console.log(props)
36
36
 
37
- console.log(setCheckName)
38
-
39
37
  return (
40
38
 
41
39
  <>
@@ -50,6 +48,8 @@
50
48
 
51
49
  onChangeName={props.onChangeName}
52
50
 
51
+ setCheckName={setCheckName}
52
+
53
53
  />
54
54
 
55
55
  <button type="button"
@@ -278,7 +278,7 @@
278
278
 
279
279
  ##結果
280
280
 
281
- NGパターンでもOKパターンでもSAVEボタンを押してもボタンが機能せず、
281
+ NGパターンでもOKパターンでもSAVEボタンを押してもボタンが機能せず、setCheckNameが参照されないエラーが出ています。
282
282
 
283
283
  ※disabled機能を追加する前まではSAVEボタンにて、ログが出せていた。（Reduxを使用）
284
284
 

4

情報を追加。Contentを扱っているファイルを追加

2021/01/11 11:36

投稿

yuki-o0413
yuki-o0413

スコア8

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  OKだったら（入力値３文字以上の場合）ボタンがdisabledがfalseになることを想定し、書きました。
16
16
 
17
-
17
+ ####Content.js
18
18
 
19
19
  ```
20
20
 
@@ -138,6 +138,142 @@
138
138
 
139
139
  ```
140
140
 
141
+ ####App.js
142
+
143
+ ```
144
+
145
+ import React, { Component } from 'react';
146
+
147
+
148
+
149
+ import Aside from './components/Aside';
150
+
151
+ import Header from './components/Header';
152
+
153
+ import Footer from './components/Footer';
154
+
155
+ import Top from './components/Top';
156
+
157
+ import Content from './components/Content';
158
+
159
+
160
+
161
+
162
+
163
+ class App extends Component {
164
+
165
+ constructor(props) {
166
+
167
+ super(props);
168
+
169
+ }
170
+
171
+
172
+
173
+ // formId
174
+
175
+ onChangeId = (e) => {
176
+
177
+ console.log(e.target.value)
178
+
179
+ this.props.updateFormId(e.target.value);
180
+
181
+ }
182
+
183
+ // forName
184
+
185
+ onChangeName = (e) => {
186
+
187
+ console.log(e.target.value)
188
+
189
+ this.props.updateFormName(e.target.value);
190
+
191
+ }
192
+
193
+ // clickSaveButton
194
+
195
+ onSaveItem = () => {
196
+
197
+ console.log(this.props)
198
+
199
+ console.log("SAVE_ID: ",this.props.id);
200
+
201
+ console.log("SAVE_NAME: ",this.props.name);
202
+
203
+ }
204
+
205
+
206
+
207
+ render() {
208
+
209
+ const formItem = this.props
210
+
211
+ // formEvent
212
+
213
+ const contentHandler = ({onChangeId, onChangeName, onSaveItem}) => ({ onChangeId, onChangeName, onSaveItem })
214
+
215
+ console.log('App.render:', this.props);
216
+
217
+
218
+
219
+ return (
220
+
221
+ <div className="content">
222
+
223
+ <Aside />
224
+
225
+ <Header />
226
+
227
+ sample site
228
+
229
+ {/* <div className="row">
230
+
231
+
232
+
233
+ <div className="col-5">
234
+
235
+ <p>test</p>
236
+
237
+ </div>
238
+
239
+ </div> */}
240
+
241
+ <Top />
242
+
243
+ <br />
244
+
245
+ <br />
246
+
247
+ <br />
248
+
249
+ <div className="container">
250
+
251
+ <Content formItem={formItem} {...contentHandler(this)} />
252
+
253
+ </div>
254
+
255
+ <br />
256
+
257
+ <br />
258
+
259
+ <br />
260
+
261
+ <Footer />
262
+
263
+ </div>
264
+
265
+ );
266
+
267
+ }
268
+
269
+ }
270
+
271
+ export default App;
272
+
273
+
274
+
275
+ ```
276
+
141
277
 
142
278
 
143
279
  ##結果

3

if文の書き方を変更

2021/01/10 10:41

投稿

yuki-o0413
yuki-o0413

スコア8

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  ※React　hookを使い、stateを持たせ、disabledをbuttonにセット、ボタンを押した時に入力値のチェックを行い、
14
14
 
15
- OKだったら（入力値３文字以上の場合）ボタンがdisabledがtrueになることを想定し、書きました。
15
+ OKだったら（入力値３文字以上の場合）ボタンがdisabledがfalseになることを想定し、書きました。
16
16
 
17
17
 
18
18
 
@@ -28,21 +28,13 @@
28
28
 
29
29
  export default function Content(props) {
30
30
 
31
- //NAME３文字以上ででsaveボタン押せるようにdisabledを切り替える
31
+ //NAME３文字以上ででsaveボタン押せるようにdisabledを入れる
32
32
 
33
- const [checkName, setCheckName] = useState([{ countName: true }]);
33
+ const [checkName, setCheckName] = useState(true);
34
-
35
- const judgeName = (e) => {
36
-
37
- if (e.target.value.length >= 3){
38
-
39
- setCheckName([{ countName: false }])
40
-
41
- }
42
-
43
- }
44
34
 
45
35
  console.log(props)
36
+
37
+ console.log(setCheckName)
46
38
 
47
39
  return (
48
40
 
@@ -66,7 +58,7 @@
66
58
 
67
59
  onClick={(e) => {props.onSaveItem();console.log(e)}}
68
60
 
69
- disabled = {judgeName}
61
+ disabled = {checkName}
70
62
 
71
63
  >
72
64
 
@@ -118,7 +110,19 @@
118
110
 
119
111
  onChange={
120
112
 
113
+ (e) =>
114
+
115
+ {
116
+
117
+ if (e.target.value.length >= 3){
118
+
119
+ setCheckName(false)
120
+
121
- (e) => props.onChangeName(e)
121
+ {props.onChangeName(e)}
122
+
123
+ }
124
+
125
+ }
122
126
 
123
127
  }
124
128
 
@@ -138,7 +142,7 @@
138
142
 
139
143
  ##結果
140
144
 
141
- NGパターンでもOKパターンでもSAVEボタンを押してもログが出されず、ボタンが非活性にもなりませんでした。
145
+ NGパターンでもOKパターンでもSAVEボタンを押してもボタンが機能せず、
142
146
 
143
147
  ※disabled機能を追加する前まではSAVEボタンにて、ログが出せていた。（Reduxを使用）
144
148
 

2

hoshi-takanori さんよりstateを持つ必要があるとヒントをいただき、コード修正。

2021/01/10 07:31

投稿

yuki-o0413
yuki-o0413

スコア8

test CHANGED
File without changes
test CHANGED
@@ -20,9 +20,29 @@
20
20
 
21
21
  'use strict';
22
22
 
23
+ import React,{ useState } from 'react';
24
+
25
+ import { createStore } from "redux";
26
+
23
27
 
24
28
 
25
29
  export default function Content(props) {
30
+
31
+ //NAME３文字以上ででsaveボタン押せるようにdisabledを切り替える
32
+
33
+ const [checkName, setCheckName] = useState([{ countName: true }]);
34
+
35
+ const judgeName = (e) => {
36
+
37
+ if (e.target.value.length >= 3){
38
+
39
+ setCheckName([{ countName: false }])
40
+
41
+ }
42
+
43
+ }
44
+
45
+ console.log(props)
26
46
 
27
47
  return (
28
48
 
@@ -46,7 +66,9 @@
46
66
 
47
67
  onClick={(e) => {props.onSaveItem();console.log(e)}}
48
68
 
69
+ disabled = {judgeName}
70
+
49
- >
71
+ >
50
72
 
51
73
  SAVE
52
74
 
@@ -72,7 +94,7 @@
72
94
 
73
95
  <label className="pt-2">ID</label>
74
96
 
75
- <input id="1"
97
+ <input id="id"
76
98
 
77
99
  type="text"
78
100
 
@@ -86,7 +108,7 @@
86
108
 
87
109
  <label className="pt-2">Name</label>
88
110
 
89
- <input id="2"
111
+ <input id="name"
90
112
 
91
113
  type="text"
92
114
 
@@ -99,16 +121,6 @@
99
121
  (e) => props.onChangeName(e)
100
122
 
101
123
  }
102
-
103
- disabled = {(e)=>{
104
-
105
- if (e.target.value.length < 3) {
106
-
107
- true
108
-
109
- }else{false}
110
-
111
- }}
112
124
 
113
125
  />
114
126
 

1

hoshi-takanori さんよりstateを持つ必要があるとヒントをいただき、コード修正。

2021/01/07 00:29

投稿

yuki-o0413
yuki-o0413

スコア8

test CHANGED
File without changes
test CHANGED
@@ -9,6 +9,12 @@
9
9
  ##試したこと
10
10
 
11
11
  以下のようにコードを書きました。
12
+
13
+ ※React　hookを使い、stateを持たせ、disabledをbuttonにセット、ボタンを押した時に入力値のチェックを行い、
14
+
15
+ OKだったら（入力値３文字以上の場合）ボタンがdisabledがtrueになることを想定し、書きました。
16
+
17
+
12
18
 
13
19
  ```
14
20
 
@@ -118,8 +124,16 @@
118
124
 
119
125
 
120
126
 
121
- 結果、挙動がdisabledを付けなかった時と変わらず、保存ができてしまいました。
127
+ ##結果
122
128
 
123
- 期待する動きを実現するために、アドバイスいただけるとありがたいです。
129
+ NGパターンでもOKパターンでもSAVEボタンを押してもログが出されず、ボタンが非活性にもなりませんでした。
124
130
 
131
+ ※disabled機能を追加する前まではSAVEボタンにて、ログが出せていた。（Reduxを使用）
132
+
133
+ 解決方法見つけられず、、、
134
+
135
+ 何か、ヒントいただけるとありがたいです。
136
+
137
+
138
+
125
- よろしくお願いします。
139
+ また、必要な情報があれば追記します。よろしくお願いします。