src/Input.js File

import React,{PropTypes} from 'react';
import Component from './utils/Component';
import classnames from 'classnames';
import {setPhoenixPrefix} from './utils/Tool';

/**
 * input框组件<br/>
 * - 使用方式跟原生一致, 支持disabled。
 * - 通过type设置input的类型, 可选text,checkbox,radio。
 * - 当类型为text时, 可通过defaultValue设置默认值; 可通过value和onChange事件配合使用手动设置输入值。
 * - 当类型为checkbox&radio时, 可通过label设置展示的文字。
 * - 当类型为checkbox&radio时, 可通过defaultChecked设置默认值; 可通过checked和onChange事件配合使用手动设置输入值。
 *
 * 主要属性和接口：
 * - type:input类型, 默认text <br/>
 * 如：`<Input type="checkbox" />`
 * - defaultValue:默认值(text) <br/>
 * 如：`<Input type="text" defaultValue="测试" />`
 * - value&onChange:(text)<br/>
 * 如：`<Input type="text" value={this.state.value} onChange={()=>{this.setState({value:"测试"})}} />`
 * - label:展示的文字信息(checkbox&radio), 默认空<br/>
 * 如：`<Input type="checkbox" label="测试" />`
 * - defaultChecked:默认值(checkbox&radio)<br/>
 * 如：`<Input type="checkbox" defaultChecked={true} />`
 * - checked&onChange:(checkbox&radio)<br/>
 * 如：`<Input type="checkbox" checked={this.state.checked} onChange={()=>{this.setState({checked:false})}} />`
 *
 * @class Input
 * @module 表单组件
 * @extends Component
 * @constructor
 * @since 0.1.0
 * @demo input|input.js {展示}
 * @show true
 * */

export default class Input extends Component{

    static propTypes = {
        /**
         * input类型, 可选[text,checkbox,radio], 默认text
         * @property type
         * @type String
         * @default 'text'
         * */
        type: PropTypes.string,
        /**
         * 类型为checkbox&radio时, 展示的文字信息
         * @property label
         * @type String
         * @default ''
         * */
        label: PropTypes.string,
        /**
         * 样式前缀
         * @property classPrefix
         * @type String
         * @default 'input'
         * */
        classPrefix:PropTypes.string,
        /**
         * 标签tagName
         * @property componentTag
         * @type String
         * */
        componentTag:PropTypes.string,
        /**
         * 更改值时触发的回调
         * @event onChange
         * @type Function
         * */
        onChange: PropTypes.func
    };

    static defaultProps = {
        type: 'text',
        classPrefix:'input',
        componentTag:'div',
        classMapping : {}
    };

    constructor(props, context) {
        super(props, context);
    }

    otherView(type){
        return (
            <label className={setPhoenixPrefix("multi-group")}>
                <div className={setPhoenixPrefix(type)}>
                    <input {...this.props} />
                    <i></i>
                </div>
                <span>{this.props.label ||''}</span>
            </label>
        );
    }

    renderInput(type){
        let html = <div></div>;

        if(type =='checkbox' || type=='radio'){
            html=this.otherView(type);
        }else{
            html = (<input {...this.props} className={
                classnames(
                    this.getProperty(true),
                    this.props.className
                )
                }/>);
        }

        return html;
    }


    render(){
        let {componentTag:Component,type} = this.props;
        return this.renderInput(type ? type:'text');
    }

}