Checkbox.js
props.checked用于设置不可控组件,props.defaultChecked用于设置可控组件;
props.children无读取渲染实现,添加props.children无效。
部分代码书写结构同react-resource,构建createClass(Constructor,protoProps,staticProps)函数用于设置类的原型方法和静态方法,protoProps、staticProps以数组[ { key [,value] [,enumerable] [,configurable] } ]形式书写,内部调用Object.defineProperty设置属性描述符。
'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); // 浅拷贝 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; }; })(); var _react = require('react'); var _react2 = _interopRequireDefault(_react); // 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; } /*var props={ name, prefixCls,// 样式类前缀 style, type,// input类型设置"checkbox|radio" readOnly, disabled, className, defaultChecked,// 选中与否的初始值,可控组件属性,与react默认机制相反 checked,// 不可控组件属性,用户操作将不引起组件重绘,与react默认机制相反 onFocus(e),// 获得焦点时触发执行函数 onBlur(e),// 失去焦点时触发执行函数 onChange(target,stopPropagation,preventDefault)// 多选框值改变时触发执行函数 }; <Checkbox {...props}></Checkbox>*/ // 组件内部没有操控props.children的实现,因此JSX语法在Checkbox组件元素内添加子元素无效 var Checkbox = function (_React$Component) { _inherits(Checkbox, _React$Component); function Checkbox(props) { _classCallCheck(this, Checkbox); var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Checkbox).call(this, props)); _initialiseProps.call(_this); var checked = false; if ('checked' in props) { checked = props.checked; } else { checked = props.defaultChecked; } _this.state = { checked: checked, focus: false }; return _this; } _createClass(Checkbox, [{ key: 'componentWillReceiveProps', value: function componentWillReceiveProps(nextProps) { if ('checked' in nextProps) { this.setState({ checked: nextProps.checked }); } } }, { key: 'render', value: function render() { var _classNames; var props = _extends({}, this.props); // react机制,可控组件props.checked或不可控组件props.defaultChecked // 取消react默认的单复选框不可控组件实现源props.defaultChecked属性 delete props.defaultChecked; var state = this.state; var prefixCls = props.prefixCls; var checked = state.checked; if (typeof checked === 'boolean') { checked = checked ? 1 : 0; } var className = (0, _classnames2["default"])((_classNames = {}, _defineProperty(_classNames, props.className, !!props.className), _defineProperty(_classNames, prefixCls, 1), _defineProperty(_classNames, prefixCls + '-checked', checked), _defineProperty(_classNames, prefixCls + '-checked-' + checked, !!checked), _defineProperty(_classNames, prefixCls + '-focused', state.focus), _defineProperty(_classNames, prefixCls + '-disabled', props.disabled), _classNames) ); return _react2["default"].createElement( 'span', { className: className, style: props.style }, _react2["default"].createElement('span', { className: prefixCls + '-inner' }), _react2["default"].createElement('input', { name: props.name, type: props.type, readOnly: props.readOnly, disabled: props.disabled, className: prefixCls + '-input', checked: !!checked, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange }) ); } }]); return Checkbox; }(_react2["default"].Component); // 为代码书写的清晰性,_initialiseProps函数用于分离事件函数,也可在_createClass函数设为Checkbox的原型方法 var _initialiseProps = function _initialiseProps() { var _this2 = this; this.handleFocus = function (e) { _this2.setState({ focus: true }); _this2.props.onFocus(e); }; this.handleBlur = function (e) { _this2.setState({ focus: false }); _this2.props.onBlur(e); }; this.handleChange = function (e) { var checked = _this2.state.checked; // props.checked有值时,点击事件将不触发组件重绘;只有props.defaultChecked属性时,重绘组件 if (!('checked' in _this2.props)) { _this2.setState({ checked: !checked }); } _this2.props.onChange({// 为什么不传入e??? target: _extends({}, _this2.props, { checked: !checked }), stopPropagation: function stopPropagation() { e.stopPropagation(); }, preventDefault: function preventDefault() { e.preventDefault(); } }); }; }; exports["default"] = Checkbox; Checkbox.propTypes = { name: _react2["default"].PropTypes.string, prefixCls: _react2["default"].PropTypes.string, style: _react2["default"].PropTypes.object, type: _react2["default"].PropTypes.string, className: _react2["default"].PropTypes.string, defaultChecked: _react2["default"].PropTypes.oneOfType([_react2["default"].PropTypes.number, _react2["default"].PropTypes.bool]), checked: _react2["default"].PropTypes.oneOfType([_react2["default"].PropTypes.number, _react2["default"].PropTypes.bool]), onFocus: _react2["default"].PropTypes.func, onBlur: _react2["default"].PropTypes.func, onChange: _react2["default"].PropTypes.func }; Checkbox.defaultProps = { prefixCls: 'rc-checkbox', style: {}, type: 'checkbox', className: '', defaultChecked: false, onFocus: function onFocus() {}, onBlur: function onBlur() {}, onChange: function onChange() {} }; module.exports = exports['default'];
index.js对外接口
'use strict'; module.exports = require('./Checkbox');