formik

src/components/passport/accountLogin/index.js

 import React, { Component } from "react"
 import './accountLogin.scss'
 import { Link } from "react-router-dom";
+import { withFormik, FastField, Form } from "formik";
 
 
 import Header from "../common/Header";
@@ -17,29 +18,48 @@ class AccountLogin extends Component {
         return (
             <div className={'account-login'}>
                 <Header/>
-                <div className="login-info">
-                    <Input inputType={'number'}
-                           placeholder={'手机/邮箱/昵称'}
-                           wrapperClass={'tel-input'}
-                           icon={<i className={'iconfont iconshouji'}
-                                    style={{fontSize: '22px', left: '10px'}}
-                           />}
+                <Form className="login-info">
+                    <FastField
+                        name='account'
+                        render={({field}) => (
+                            <Input
+                                {...field}
+                                type={'number'}
+                                placeholder={'手机/邮箱/昵称'}
+                                wrapperClass={'tel-input'}
+                                icon={
+                                    <i className={'iconfont iconshouji'}
+                                       style={{fontSize: '22px', left: '10px'}}
+                                    />
+                                }
+                            />
+                        )}
                     />
-                    {/*<VeriCodeButton
-                        className={'verification'}
-                    />*/}
-
-                    <PasswordInput
-                        placeholder={'密码'}
+                    <FastField
+                        name='password'
+                        render={({field}) => (
+                            <PasswordInput
+                                {...field}
+                                placeholder={'密码'}
+                            />
+                        )}
                     />
-
                     <LoginButton/>
                     <Link className={'forgot-password-btn'} to='/passport/forgot-password'>忘记密码</Link>
-                </div>
+                </Form>
                 {/*<LoginWays loginWays={this.props.loginWays}/>*/}
             </div>
         );
     }
 }
 
-export default AccountLogin
+const formikConfig = {
+    mapPropsToValues: () => ({
+        account: '',
+        password: ''
+    }),
+    handleSubmit(values) {
+        console.log(values)
+    }
+}
+export default withFormik(formikConfig)(AccountLogin)

src/components/passport/common/passwordInput/index.js

-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import './password-input.scss'
 import classnames from 'classnames'
 
 import Input from '../Input'
 
-class PasswordInput extends Component {
+class PasswordInput extends PureComponent {
     constructor(props) {
         super(props);
         this.state = {
@@ -17,21 +17,19 @@ class PasswordInput extends Component {
     }
 
     render() {
-        let {placeholder, onChange} = this.props
+        let {placeholder, ...rest} = this.props
         return (
             <Input
                 type={this.state.showPassword ? 'text' : 'password'}
                 wrapperClass={'password-input'}
                 placeholder={placeholder}
-                onChange={onChange}
+                {...rest}
             >
-                <i className={classnames('iconfont', {
-                    'iconpwd-hidden': this.state.showPassword,
-                    'iconyanjing': !this.state.showPassword
-                })} onClick={this.togglePasswordVisibility}/>
+                <i className={classnames('iconfont', [this.state.showPassword ? 'iconpwd-hidden' : 'iconyanjing'])}
+                   onClick={this.togglePasswordVisibility}/>
             </Input>
         );
     }
 }
 
-export default PasswordInput;
\ No newline at end of file
+export default PasswordInput;

src/components/passport/store/actions/index.js → src/components/passport/store/actions.js

@@ -3,6 +3,10 @@ export const login = (userInfo) => ({
     userInfo
 })
 
+export const logout = () => ({
+    type: 'LOGOUT'
+})
+
 export const requestLogin = payload => dispatch => {
     
 }
\ No newline at end of file

src/components/passport/wechatLogin/index.js

@@ -20,7 +20,7 @@ class WechatLogin extends PureComponent {
                 <Form className="login-info">
                     <FastField
                         name='tel'
-                        /*render={({field}) => (
+                        render={({field}) => (
                             <Input
                                 {...field}
                                 type={'tel'}
@@ -30,21 +30,8 @@ class WechatLogin extends PureComponent {
                                          style={{fontSize: '22px', left: '10px'}}
                                 />}
                             />
-                        )}*/
+                        )}
                     >
-                        {
-                            ({field}) => (
-                                <Input
-                                    {...field}
-                                    type={'tel'}
-                                    placeholder={'手机号快捷登录(免注册)'}
-                                    wrapperClass={'tel-input'}
-                                    icon={<i className={'iconfont iconshouji'}
-                                             style={{fontSize: '22px', left: '10px'}}
-                                    />}
-                                />
-                            )
-                        }
                     </FastField>
                     <FastField
                         type='number'
@@ -78,13 +65,13 @@ const FormikConfig = {
         console.log(values)
     },
     validateOnChange: false,
-    validate: (values) => {
+    /*validate: (values) => {
         let errors = {}
         if (!/^1[3-9](\d{9})$/.test(values.tel)) {
             errors.tel = '手机号不正确'
         }
         return errors
-    }
+    }*/
 }
 
 export default withFormik(FormikConfig)(WechatLogin)
\ No newline at end of file