react实现Radio组件

本文旨在用最清楚的结构去实现一些组件的基本功能。希望和大家一起学习，共同进步

效果展示：

测试组件：

class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
           active:1
        }
    }
    onGroupChange(value) {
        this.setState({
            active: value
        })
    }
    render() {
        return (
	        <div>
		       	 <RadioGroup onChange={this.onGroupChange.bind(this)} active={this.state.active}>
		               <Radio value={1}>使用余额支付</Radio>
		               <Radio value={2}>使用微信支付</Radio>
		          </RadioGroup>
		         <Button onClick={()=>{
	                        console.log("此时选中的是:"+this.state.active)
	                    }}>下一步</Button>
	        </div>
            )
    }
}
export default Test;

RadioGroup：

import React, { Component } from 'react';
class RadioGroup extends Component {
    handleActiveChange(value) {
        console.log(`${value}被选中了`)
        this.props.onChange(value)
    }
    render() {
        return (
            <div>
                {
                    React.Children.map(this.props.children, child => {
                        let isActive = this.props.active === child.props.value ? true : false
                        return React.cloneElement(child, {
                            label: child.props.children,
                            value: child.props.value,
                            active: isActive,
                            onClick: this.handleActiveChange.bind(this)
                        })
                    })
                }
            </div>
        )
    }
}
export default RadioGroup;

Radio.jsx：

import React, { Component } from 'react';
import "./radio.scss"
class Radio extends Component {
    render() {
        return (
            <div className="radio-wrap" onClick={this.props.onClick.bind(this,this.props.value)}>
                <div className="left">
                    <div className={`circle ${this.props.active === true ? 'active' : ''} `}>
                        <div className="fork"></div>
                    </div>
                    <div className="label">{this.props.label}</div>
                </div>
            </div>
        )
    }
}
export default Radio;

Radio.scss：

.radio-wrap {
    height: 40px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0px 30px;

    &:active {
        background-color: rgb(221, 221, 221);
    }

    .left {
        display: inline-block;

        .circle {
            display: inline-block;
            height: 22px;
            width: 22px;
            box-sizing: border-box;
            border: 1px solid #c5c9cd;
            border-radius: 50%;
            background-color: #ffffff;
            position: relative;

            
        }
        .active{
            background-color: #1eb94a;
            .fork {
                height: 12px;
                width: 5px;
                border-right: 1.5px solid #ffffff;
                border-bottom: 1.5px solid #ffffff;
                position: absolute;
                top: 40%;
                left: 50%;
                transform: translate(-50%, -50%) rotate(45deg);
            }
        }

        .label {
            vertical-align: top;
            margin-left: 10px;
            display: inline-block;
            height: 22px;
            line-height: 22px;
            font-size: 14px;
        }
    }

}