index.js

import React, { Component } from 'react';
import './set-password.scss'
import { withFormik, Form, Field } from "formik";
import PasswordInput from '../common/passwordInput'
import Button from '../common/Button'
import classnames from 'classnames'
import { compose } from 'redux'

class SetPassword extends Component {

    constructor(props) {
        super(props);
        this.state = {
            password: '',
            agree: true
        };
    }


    handleChange = (val) => {
        this.setState({password: val});
    }

    toggleAgree = () => {
        this.setState({agree: !this.state.agree});
    }

    render() {

        return (
            <div className={'set-password'}>
                <p className='title'>密码需要包含6-16位字母及数字</p>
                <Form>
                    <Field
                        name='password'
                        render={({field}) => {
                            return (
                                <PasswordInput
                                    placeholder={'设置密码'}
                                    onChange={this.handleChange}
                                    {...field}
                                />
                            )
                        }}
                    />
                    <Button className={'btn-active'}>完成</Button>
                </Form>
                <p className='user-agreement'>
                    <i className={classnames({
                        'iconfont iconiconfront-3': this.state.agree,
                        disagree: !this.state.agree
                    })} onClick={this.toggleAgree}/>
                    同意<span>《七月在线用户使用协议》</span>
                </p>
                <p className='skip'>跳过</p>
            </div>
        );
    }
}

const formikConfig = {
    mapValuesToProps: () => ({
        password: ''
    }),
    handleSubmit: (values) => {

    }
}

export default compose(
    withFormik(formikConfig)
)(SetPassword);