Input源码

组件内不使用JSX，作为模块加载时可以节省代码量。

Input组件：

用于创建input、textarea元素，input、textarea元素两侧可添加额外的元素。

使用

var props={
      type,// 类型"input|textarea"
      id,
       prefixCls,// 样式类前缀
       size,// 尺寸"large|small|default"
       disabled,
       classname,// 输入框样式
       placeholder,
       value,
       defaultValue,// 默认值，不随输入框内容变动
       addonBefore,// 输入框前添加的元素
       addonAfter,// 输入框后添加的元素
 };
<Input {...props} />

 源码

antd-input.js

'use strict';

// 浅拷贝
var _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) { 
        var source = arguments[i]; 
        for (var key in source) { 
            if (Object.prototype.hasOwnProperty.call(source, key)) { 
                target[key] = source[key]; 
            } 
        } 
    } 
    return target; 
};

// _createClass(Constructor,protoProps,staticProps) 创建构造函数，定义静态方法、原型属性和方法  
// protoProps用以定义Constructor.prototype 各属性、方法的访问器属性  
// staticProps用以定义Constructor 各属性、方法的访问器属性，[{key,enumerable,configurable,value}]形式  
var _createClass = (function () {// 利用自执行匿名函数优化defineProperties书写  
    function defineProperties(target, props) {   
        for (var i = 0; i < props.length; i++) {   
            var descriptor = props[i];   
            descriptor.enumerable = descriptor.enumerable || false;   
            descriptor.configurable = true;   
            if ('value' in descriptor) descriptor.writable = true;   
            Object.defineProperty(target, descriptor.key, descriptor);   
        }   
    }   
    return function (Constructor, protoProps, staticProps) {   
        if (protoProps) defineProperties(Constructor.prototype, protoProps);   
        if (staticProps) defineProperties(Constructor, staticProps);   
        return Constructor;   
    };   
})();

// 类型判断，包括symbol类型
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? 
        function (obj) { return typeof obj; } : 
        function (obj) { 
            return obj && typeof Symbol === "function" && obj.constructor === Symbol ? 
                "symbol" : typeof obj; 
        };

var _react = require('react');
var _react2 = _interopRequireDefault(_react);

var _objectAssign = require('object-assign');
var _objectAssign2 = _interopRequireDefault(_objectAssign);

// classnames函数参数为字符串或数值时，拼接样式并返回；为对象时，拼接键并返回
// 为数组时，根据数组元素项的不同获取样式
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);

function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : { default: obj }; 
}

function _defineProperty(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, 
            { value: value, enumerable: true, configurable: true, writable: true }); 
    } else { 
        obj[key] = value; 
    } 
    return obj; 
}

// 构造函数只能使用new关键字调用
function _classCallCheck(instance, Constructor) { 
    if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } 
}

function _possibleConstructorReturn(self, call) {
    // 构造函数未曾实例化，ReferenceError引用错误 Uncaught ReferenceError:XXXX is not defined
    if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } 
    return call && (typeof call === "object" || typeof call === "function") ? call : self; 
}

// 继承，设置subClass.prototype为{constuctor:subClass}，{constuctor:subClass}的原型是superClass.prototype
// subClass.__proto__为superClass
function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); 
    }

    // 实例可访问原型属性或方法，构造函数不能
    // Object.create创建对象，首参为该对象的原型prototype，次参为对象的自有属性，并设置属性描述符
    subClass.prototype = Object.create(superClass && superClass.prototype, 
        { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } 
    }); 

    // Object.setPrototypeOf(subClass, superClass)，设置subClass.__proto__为superClass
    // Object.getPrototypeOf(subClass)，获取subClass.__proto__
    // 构造函数可访问，实例不能
    if (superClass) Object.setPrototypeOf ? 
        Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 
}

function ieGT9() {
  if ((typeof document === 'undefined' ? 'undefined' : _typeof(document)) === undefined) {
    return false;
  }
  var documentMode = document.documentMode || 0;
  return documentMode > 9;
}

// 将undefined或null调整为空字符串
function fixControlledValue(value) {
    if (typeof value === 'undefined' || value === null) {
        return '';
    }
    return value;
}

// form-group组件，props.className|style|children有效
// 作为容器组件，props.children作为UI组件，在span下渲染该UI组件；机理类似react-route中Router
// JSX使用：<Group className="" style={{}}><Children/></Group>
// 
// ****************** 关于props.children的理解，通过JSX语法传入props.children ****************** 
// ****************** 需要在包裹的父组件中将props.children转化为reactElement方有效 ****************** 
var Group = function (_React$Component) {
    _inherits(Group, _React$Component);

    function Group() {
        _classCallCheck(this, Group);

        // 构造函数返回值不影响new关键字获取实例
        return _possibleConstructorReturn(this, Object.getPrototypeOf(Group).apply(this, arguments));
    }

    // 创建Group.prototype.render方法
    _createClass(Group, [{
        key: 'render',
        value: function render() {
            // _defineProperty函数执行后获得{'ant-input-group',[props.className]}
            // classnames函数参数为字符串或数值时，拼接样式并返回；为对象时，拼接键并返回
            //    为数组时，根据数组元素项的不同获取样式
            var className = (0, _classnames2.default)(_defineProperty({
                'ant-input-group': true
            }, this.props.className, !!this.props.className));

            return _react2.default.createElement(
                'span',
                { className: className, style: this.props.style },
                this.props.children
            );
        }
    }]);

    return Group;
}(_react2.default.Component);

Group.propTypes = {
    children: _react2.default.PropTypes.any
};

// props:{
//     type,// 类型"input|textarea"
//     id,
//     prefixCls,// 样式类前缀
//     size,// 尺寸"large|small|default"
//     disabled,
//     classname,// 输入框样式
//     placeholder,
//     value,
//     defaultValue,// 默认值，不随输入框内容变动
//     addonBefore,// 输入框前添加的元素
//     addonAfter,// 输入框后添加的元素
// }
// JSX使用<Input prefixCls="" size="" ... />
var Input = function (_React$Component2) {
    _inherits(Input, _React$Component2);

    function Input() {
        _classCallCheck(this, Input);

        return _possibleConstructorReturn(this, Object.getPrototypeOf(Input).apply(this, arguments));
    }

    // 添加原型方法
    // renderInput方法用于生成input、textarea元素children
    // 生成的元素再通过renderLabledInput(children)方法用span、addonBefore、addonAfter包裹
    // renderLabledInput方法返回的reactElement元素作为render方法的输出，用于渲染
    _createClass(Input, [{
        key: 'renderLabledInput',
        value: function renderLabledInput(children) {
            var _classNames2;

            var props = this.props;
            var wrapperClassName = props.prefixCls + '-group';
            var addonClassName = wrapperClassName + '-addon';
            var addonBefore = props.addonBefore ? _react2.default.createElement(
                'span',
                { className: addonClassName },
                props.addonBefore
            ) : null;

            var addonAfter = props.addonAfter ? _react2.default.createElement(
                'span',
                { className: addonClassName },
                props.addonAfter
            ) : null;

            var className = (0, _classnames2.default)((_classNames2 = {}, 
                    _defineProperty(_classNames2, props.prefixCls + '-wrapper', true), 
                    _defineProperty(_classNames2, wrapperClassName, addonBefore || addonAfter), 
                    _classNames2)
                );

            return _react2.default.createElement(
                'span',
                { className: className },
                addonBefore,
                children,
                addonAfter
            );
        }
    }, {
        key: 'renderInput',
        value: function renderInput() {
            var _classNames3;

            var props = (0, _objectAssign2.default)({}, this.props);
            var prefixCls = props.prefixCls;
            if (!props.type) {
                return props.children;
            }

            var inputClassName = (0, _classnames2.default)(
                    (_classNames3 = {}, _defineProperty(_classNames3, prefixCls, true), 
                        _defineProperty(_classNames3, prefixCls + '-sm', props.size === 'small'), 
                        _defineProperty(_classNames3, prefixCls + '-lg', props.size === 'large'), 
                        _defineProperty(_classNames3, props.className, !!props.className), 
                        _classNames3)
                    );

            var placeholder = props.placeholder;
            // ie9以下placeholder置为null
            if (placeholder && ieGT9()) {
                placeholder = null;
            }

            if ('value' in props) {
                // fixControlledValue将undefined或null调整为空字符串
                props.value = fixControlledValue(props.value);
            }

            switch (props.type) {
                case 'textarea':
                    return _react2.default.createElement('textarea', _extends({}, props, { placeholder: placeholder, className: inputClassName, ref: 'input' }));
                default:
                    return _react2.default.createElement('input', _extends({}, props, { placeholder: placeholder, className: inputClassName, ref: 'input' }));
            }
        }
    }, {
        key: 'render',
        value: function render() {
            return this.renderLabledInput(this.renderInput());
        }
    }]);

    return Input;
}(_react2.default.Component);

Input.propTypes = {
    type: _react2.default.PropTypes.string,
    id: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number]),
    size: _react2.default.PropTypes.oneOf(['small', 'default', 'large']),
    disabled: _react2.default.PropTypes.bool,
    value: _react2.default.PropTypes.any,
    defaultValue: _react2.default.PropTypes.any,
    className: _react2.default.PropTypes.string,
    addonBefore: _react2.default.PropTypes.node,
    addonAfter: _react2.default.PropTypes.node,
    prefixCls: _react2.default.PropTypes.string
};

Input.defaultProps = {
    defaultValue: '',
    disabled: false,
    prefixCls: 'ant-input',
    type: 'text'
};

module.exports = Input;
module.exports.Group = Group;