react组件设计实践之: radioGroup

前言:

为了方便以后回顾, 把所有文件均写在了一个文件中, 只是逻辑层面无样式

import React, { Component } from 'react';

// 测试组件
class Cp extends Component {
    render() {
        return (
            <div>
                <RadioGroup name="mvvm" onChange={e => this.onGroupChange(e)} defaultSelect={1}>
                    <Radio>react</Radio>
                    <Radio>vue</Radio>
                    <Radio>angular</Radio>
                </RadioGroup>
            </div>
        );
    }
    onGroupChange(e) {
        console.log(e.target.value, e.target.dataset.name);
    }
}

// 父级组件
const RadioGroup = (props) => {
    let index = 0;
    let defaultSelect = props.defaultSelect;
  
    return (
        <div onChange={e=>typeof props.onChange === 'function' && props.onChange(e)}> 
            {
                React.Children.map(props.children, child => {
                    return React.cloneElement(child, {
                        name: props.name,
                        // 设置index
                        value: index++,
                        //  设置默认勾选
                        defaultChecked:(index-1) === defaultSelect 
                    })
                })
            }
        </div>
    )
}

// 子组件
const Radio = ({ children, ...props }) => (
    <label>
        <input type="radio" {...props} data-name={children} /> {children}
    </label>
)
export default Cp