rc-radio源码

最新推荐文章于 2023-09-10 23:21:13 发布

schifred

最新推荐文章于 2023-09-10 23:21:13 发布

阅读量250

点赞数

分类专栏： react-component组件库文章标签： javascript ViewUI

react-component组件库专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个基于rc-checkbox的Radio.js单选按钮组件，详细解析了其属性配置及使用方式。Radio.js通过设置props.type='radio'来实现单选框的功能，并且可以设置默认选中状态和监听事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Radio.js：

1. 基于rc-checkbox组件，props.type属性赋值为radio，渲染input元素时使用（即该节点的type属性）；props.prefixCls样式类前缀改变，基本样式不同。

2. 同rc-checkbox组件，只负责绘制Radio单选框样式，不负责绘制lable、text；因此调用时使用JSX语法书写<Radio>text</Radio>，Radio组件将不会渲染text文本（即组件内部没有按需绘制props.children的实现）。

3. 同rc-checkbox组件，props.checked属性用于设置不可控组件，用户点击单选框时将不触发任何动作，也不影响单选框的状态；props.defaultChecked属性用于设置初始值，用户点击单选框时将触发this.setState重绘组件，单选框选中与否的状态也随之改变。

'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; 
};

var React = require('react');
var Checkbox = require('rc-checkbox');

/*var props={
    name,
    prefixCls,// 样式类前缀
    style,
    type,// input类型设置"radio"
    readOnly,
    disabled,
    className,
    defaultChecked,// defaultChecked、checked无差别，没法设置不可控组件
    checked,
    onFocus(e),// 获得焦点时触发执行函数
    onBlur(e),// 失去焦点时触发执行函数
    onChange(target,stopPropagation,preventDefault)// 多选框值改变时触发执行函数
};
<Radio {...props}/></Radio>*/
var Radio = React.createClass({
    displayName: 'Radio',

    getDefaultProps: function getDefaultProps() {
        return {
            prefixCls: 'rc-radio',
            type: 'radio'
        };
    },

    render: function render() {
        return React.createElement(Checkbox, _extends({}, this.props, { ref: 'checkbox' }));
    }
});

module.exports = Radio;

对外接口

'use strict';

module.exports = require('./Radio');