ReactJS 组件 - RadioGroup组件

radio组件的使用方法

this.state = {
            selectedValue : 'PC'
        }

handleChange(event){
    console.log('change');
    console.log(event);
    this.setState({selectedValue:event});
}

<RadioGroup name="platform" selectedValue={this.state.selectedValue} onChange={(event)=>{this.handleChange(event)}}>
    <Radio value="PC" disabled="true">PC</Radio>
    <Radio value="APP">APP</Radio>
    <Radio value="WAP">WAP</Radio>
</RadioGroup>

RadioGroup具有三个属性

  • name RadioGroup的name
  • selectedValue RadioGroup数据回填的对应字段
  • onChange RadioGroup值变化是触发的函数

Radio具有两个属性

  • value 按钮选中所对应的值
  • disabled 按钮是否禁用

渲染出的DOM结构

import React, {Component, PropTypes} from 'react';
import classnames from 'classnames';
require('./index.less')

class Radio extends Component{
    render() {
        const {name, selectedValue, onChange} = this.context.radioGroup;
        const {children,disabled} = this.props;
        const optional = {};
        if(selectedValue !== undefined) {
          optional.checked = (this.props.value === selectedValue);
        }
        if(disabled !== undefined){
            optional.disabled = (this.props.disabled === disabled)        ;
        }
        if(typeof onChange === 'function') {
          optional.onChange = onChange.bind(null, this.props.value);
        }

        return (
            <span className="normal-radio">
                <input type="radio" name={name} {...optional} className="radio-input"/>
                <i className="box"></i>{children}
            </span>
        );
    }
}

Radio.contextTypes = {
    radioGroup: React.PropTypes.object
}


class RadioGroup extends Component {
    static defaultProps = {
        Component: "div"
    }

    getChildContext() {
        const {name, selectedValue, onChange} = this.props;
        return {
            radioGroup: {
                name, selectedValue, onChange
            }
        }
    }

    render() {
        const {Component, name, selectedValue, onChange, children, ...rest} = this.props;
        return (<Component {...rest}>{children}</Component>) ;
    }
}

RadioGroup.childContextTypes = {
    radioGroup: React.PropTypes.object
}

RadioGroup.propTypes = {
    name: PropTypes.string,
    selectedValue: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
      PropTypes.bool,
    ]),
    onChange: PropTypes.func,
    children: PropTypes.node.isRequired,
    Component: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.func,
      PropTypes.object
    ])
}

export {RadioGroup, Radio}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,923评论 18 139
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,842评论 2 17
  • 0.B/S结构 浏览器服务器模式,web浏览器是客户端最主要的应用软件.将客户端使用web进行统一,系统功能实现集...
    liusong007阅读 1,089评论 0 1
  • 今天估计又要踩点交作业了,其实蛮不喜欢老拖到最后一刻才完成作业的自己,就像厌倦学生临到最后期限才交功课报告或是考试...
    田心月儿阅读 287评论 3 0
  • 1、C语言logcat环境的搭建 1、在Android.mk文件里面添加LOCAL_LDLIBS += -llog...
    熊雅慧阅读 412评论 0 0