React封装RadioGroup

class RadioGroup extends React.Component {
    getRadioComponent(item, index) {
        return <div className="custom-radio" key={this.props.name + '-' + index}>
            <input id={item.id} type="radio" name={this.props.name} value={item.value} checked={this.props.checkedValue == item.value} disabled={item.disabled} onChange={this.props.checkChanged} />
            <label htmlFor={item.id} disabled={item.disabled}>{item.text}</label>
        </div>
    }

    render() {
        let
            className = this.props.isHorizontal ? 'horizontal' : 'normal',
            items = this.props.items || [];
        return <div id={this.props.id} className={className}>
            {
                items.map((item, index) => {
                    if (this.props.isHorizontal)
                        return this.getRadioComponent(item, index);
                    else
                        return <div key={index}>{this.getRadioComponent(item, index)}</div>;
                })
            }
        </div>
    }
}

export default RadioGroup;

使用：

const type = {
        Auto: 0,
        Use: 1
}
this.state = {
    defaultCheckedValue: type.Use,
    radioOptions: [
        {
            id: "id-auto",
            value: type.Auto,
            text: 'auto'
                {
            id: "id-use",
            value: type.Use,
            text: 'use'
        }],
}

onActionSelectedChange(e, args) {
        this.setState(Object.assign(this.state, {
            defaultCheckedValue: parseInt(e.currentTarget.value),
        }));
    }

<RadioGroup
    id={"id"}
    name={"dqhan-name"}
    isHorizontal={true}
    items={this.state.radioOptions}
    checkedValue={this.state.defaultCheckedValue}
    checkChanged={this.handleRadioChange}
/>