ソースを参照

added handler for all input in login page + added precision to proptype check for Card

Skylsmoi 6 年 前
コミット
258dfc8f1e
共有3 個のファイルを変更した18 個の追加5 個の削除を含む
  1. 5 3
      src/component/common/Card/Card.jsx
  2. 8 1
      src/component/common/Input/InputCheckbox.jsx
  3. 5 1
      src/container/Login.jsx

+ 5 - 3
src/component/common/Card/Card.jsx ファイルの表示

@@ -22,10 +22,12 @@ Card.propTypes = {
22 22
   // ),
23 23
 
24 24
   // from http://www.mattzabriskie.com/blog/react-validating-children
25
-  children: PropTypes.arrayOf((propValue, key, componentName /* , location, propFullName */) => {
25
+  children: PropTypes.arrayOf((children, key, componentName /* , location, propFullName */) => {
26 26
     if (
27
-      key >= 3 ||
28
-      propValue.some(p => p.type !== CardHeader && p.type !== CardBody)
27
+      children.length > 2 ||
28
+      children[0].type !== CardHeader ||
29
+      children[1].type !== CardBody
30
+      // children.some(p => p.type !== CardHeader && p.type !== CardBody)
29 31
     ) {
30 32
       return new Error(`PropType Error: childrens of ${componentName} must be: 1 CardHeader and 1 CardBody.`)
31 33
     }

+ 8 - 1
src/component/common/Input/InputCheckbox.jsx ファイルの表示

@@ -5,7 +5,12 @@ import classnames from 'classnames'
5 5
 const InputGroupText = props => {
6 6
   return (
7 7
     <label className={classnames(`${props.parentClassName}`, props.customClass, 'custom-control custom-checkbox')}>
8
-      <input type='checkbox' className='custom-control-input' />
8
+      <input
9
+        type='checkbox'
10
+        className='custom-control-input'
11
+        checked={props.checked}
12
+        onChange={props.onChange}
13
+      />
9 14
       <span className={classnames(`${props.parentClassName}__checkbox`, 'custom-control-indicator')} />
10 15
       <span className={classnames(`${props.parentClassName}__label`, 'custom-control-description')}>
11 16
         {props.label}
@@ -18,6 +23,8 @@ export default InputGroupText
18 23
 
19 24
 InputGroupText.PropTypes = {
20 25
   parentClassName: PropTypes.string.isRequired,
26
+  checked: PropTypes.bool.isRequired,
27
+  onChange: PropTypes.func.isRequired,
21 28
   customClass: PropTypes.string,
22 29
   label: PropTypes.string
23 30
 }

+ 5 - 1
src/container/Login.jsx ファイルの表示

@@ -16,12 +16,14 @@ class Login extends React.Component {
16 16
     super(props)
17 17
     this.state = {
18 18
       inputLogin: '',
19
-      inputPassword: ''
19
+      inputPassword: '',
20
+      inputRememberMe: false
20 21
     }
21 22
   }
22 23
 
23 24
   handleChangeLogin = e => this.setState({inputLogin: e.target.value})
24 25
   handleChangePassword = e => this.setState({inputPassword: e.target.value})
26
+  handleChangeRememberMe = () => this.setState(prev => ({inputRememberMe: !prev.inputRememberMe}))
25 27
 
26 28
   handleClickSubmit = () => this.props.dispatch(userLogin(this.state.inputLogin, this.state.inputPassword))
27 29
 
@@ -67,6 +69,8 @@ class Login extends React.Component {
67 69
                         parentClassName='connection__form__rememberme'
68 70
                         customClass=''
69 71
                         label='Se souvenir de moi'
72
+                        checked={this.state.inputRememberMe}
73
+                        onChange={this.handleChangeRememberMe}
70 74
                       />
71 75
                     </div>
72 76