teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

コードの追加

2018/10/15 03:08

投稿

kazoogon
kazoogon

スコア281

title CHANGED
File without changes
body CHANGED
@@ -15,6 +15,7 @@
15
15
  ```
16
16
  import React, { Component } from 'react';
17
17
 
18
+
18
19
  class Register extends Component {
19
20
  constructor(props) {
20
21
  super(props);
@@ -42,18 +43,116 @@
42
43
  };
43
44
  }
44
45
 
46
+ tmpClassName = tmp => {
47
+ const prefix = 'form-control ';
48
+
49
+ switch (tmp) {
50
+ case '': return prefix + '';
51
+ case true: return prefix + 'is-valid';
52
+ case false: return prefix + 'is-invalid';
53
+ }
54
+ };
55
+
45
56
  onChange = e => {
46
57
  const currentName = e.target.name;
47
58
  const currentValue = e.target.value;
48
59
 
49
- //chrome拡張機能react確認しても、valueが更新されない(というか消える)
60
+ //ここで、valueが更新されないというか消える
50
61
  this.setState({
51
62
  [currentName]: {
52
63
  value: currentValue
53
64
  }
54
65
  });
55
- }
56
66
 
67
+ switch(currentName){
68
+ case 'firstName':
69
+ if(currentValue !== '' && currentValue.length >= 2) {
70
+ this.setState({
71
+ firstName: {
72
+ status: true
73
+ }
74
+ })
75
+ }else{
76
+ this.setState({
77
+ firstName: {
78
+ status: false
79
+ }
80
+ })
81
+ }
82
+ break;
83
+
84
+ case 'lastName':
85
+ if(currentValue !== '' && currentValue.length >= 2) {
86
+ this.setState({
87
+ lastName: {
88
+ status: true
89
+ }
90
+ })
91
+ }else{
92
+ this.setState({
93
+ lastName: {
94
+ status: false
95
+ }
96
+ })
97
+ }
98
+ break;
99
+
100
+ case 'email':
101
+ const invalidEmail = currentValue.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/);
102
+ if(invalidEmail && currentValue !== ''){
103
+ this.setState({
104
+ email: {
105
+ status: true
106
+ }
107
+ })
108
+ }else{
109
+ this.setState({
110
+ email: {
111
+ status: false
112
+ }
113
+ })
114
+ }
115
+ break;
116
+
117
+ case 'password':
118
+ if(currentValue.length >= 6){
119
+ this.setState({
120
+ password: {
121
+ status: true
122
+ }
123
+ })
124
+ }else{
125
+ this.setState({
126
+ password: {
127
+ status: false
128
+ }
129
+ })
130
+ }
131
+ break;
132
+
133
+ case 'password2':
134
+ if(currentValue.length >= 6 && currentValue == this.state.password.value){
135
+ this.setState({
136
+ password2: {
137
+ status: true
138
+ }
139
+ })
140
+ }else{
141
+ this.setState({
142
+ password2: {
143
+ status: false
144
+ }
145
+ })
146
+ }
147
+ break;
148
+ }
149
+ };
150
+
151
+ onSubmit = e => {
152
+ e.preventDefault();
153
+
154
+ }
155
+
57
156
  render() {
58
157
  return (
59
158
  <div className="row register offset-md-2 col-md-8 col-xs-12">
@@ -129,7 +228,18 @@
129
228
  />
130
229
  </div>
131
230
 
231
+ <button
232
+ type="submit"
233
+ /*statusのlength取って、classを加えていく感じやな*/
234
+ className={`btn btn-primary
235
+ ${this.state.firstName.status? 'quarter' : ''} +
236
+ ${this.state.lastName.status? 'half' : ''} +
132
- <button type="submit" className="btn btn-primary">Submit</button>
237
+ ${this.state.email.status? 'three-quarters' : ''}`
238
+ }
239
+ disabled
240
+ >
241
+ Submit
242
+ </button>
133
243
 
134
244
  </fieldset>
135
245
  </form>
@@ -141,6 +251,8 @@
141
251
  export default Register;
142
252
 
143
253
 
254
+
255
+
144
256
  ```
145
257
 
146
258
  よろしくお願いいたします。