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}
 />