index.js

import React, { Component } from 'react';
import './password-input.scss'
import classnames from 'classnames'

import Input from '../Input'

class PasswordInput extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showPassword: false
        }
    }

    togglePasswordVisibility = () => {
        this.setState({showPassword: !this.state.showPassword})
    }

    render() {
        let {placeholder, onChange} = this.props
        return (
            <Input
                type={this.state.showPassword ? 'text' : 'password'}
                wrapperClass={'password-input'}
                placeholder={placeholder}
                onChange={onChange}
            >
                <i className={classnames('iconfont', {
                    'iconpwd-hidden': this.state.showPassword,
                    'iconyanjing': !this.state.showPassword
                })} onClick={this.togglePasswordVisibility}/>
            </Input>
        );
    }
}

export default PasswordInput;