一、Input 输入框

组件说明：
实现 Input 输入框。

效果展示：
左边有图标，右边是输入框。

二、使用案例

import {List,Input} from 'share';
import React from 'react';
export default class Example extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
      return <div>
                 <List>
                        <Input
                            src={account}
                            placeholder="请输入账号"
                            value={this.state.mobile}
                            onChange={(val) => this.change({mobile: val})}
                            style={{textAlign:'left'}}
                        />
                    </List>
                    <List>
                        <Input
                            type="password"
                            src={password}
                            placeholder="请输入密码"
                            value={this.state.password}
                            onChange={(val) => this.change({password: val})}
                            style={{textAlign:'left'}}
                        />
                    </List>
             </div>
    }
}

三、API 使用指南

四、源代码

index.js

import React from 'react';
import classnames from 'classnames';
import './index.css';
import {defaultProps} from './defaultProps';
export default class Input extends React.Component {
    static defaultProps = defaultProps;
    constructor(props) {
        super(props);
        this.state = {
            count:0
        }
    }
    change(event){
        const {onChange}=this.props;
        onChange(event.target.value);
    }
    render() {
        const {prefixCls,label,defaultValue,placeholder,type,src,renderRight,className,maxLength,style} =this.props;
        return (
            <div className={prefixCls}>
                <div className={prefixCls+"-wrap"}>
                {src? <img src={src} alt="" className={prefixCls+"-icon"}/>:label?<label htmlFor="" className={prefixCls+"-label"}>{label}</label>:null}
                <input type={type?type:"text"}
                       onChange={(e)=>this.change(e)}
                       className={classnames(prefixCls+"-input",className)}
                       placeholder={placeholder}
                       maxLength = {maxLength}
                       style={style}
                       defaultValue={defaultValue}
                />
                </div>
                {renderRight?renderRight():null}
            </div>
        )
    }
}

index.less

@import '../default';
@prefixCls: s-input;

.@{prefixCls} {
  display: flex;
  justify-content: space-between;
  .@{prefixCls}-wrap{
    display: flex;
    align-items: center;
    width: 100%;
    flex:1;
    .@{prefixCls}-label{
      margin-right: @size-10;
    }
    .@{prefixCls}-icon{
      width: @size-20;
      margin-right: @size-10;
    }
    .@{prefixCls}-input{
      flex: 1;
      border: none;
      height: @size-20+5;
      font-size: @size-16;
      background: @bc-body;
      text-align: left;
    }
  }
}

defaultProps.js

function noop() {}
export const defaultProps = {
    prefixCls: 's-input',
    onClick: noop,
    label:"",
    placeholder:"",
    type:"",
    src:"",
    renderRight:null,
    className:"",
    maxLength:11,
    style:{}
};