React封装RadioGroup
1 class RadioGroup extends React.Component { 2 getRadioComponent(item, index) { 3 return <div className="custom-radio" key={this.props.name + '-' + index}> 4 <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} /> 5 <label htmlFor={item.id} disabled={item.disabled}>{item.text}</label> 6 </div> 7 } 8 9 render() { 10 let 11 className = this.props.isHorizontal ? 'horizontal' : 'normal', 12 items = this.props.items || []; 13 return <div id={this.props.id} className={className}> 14 { 15 items.map((item, index) => { 16 if (this.props.isHorizontal) 17 return this.getRadioComponent(item, index); 18 else 19 return <div key={index}>{this.getRadioComponent(item, index)}</div>; 20 }) 21 } 22 </div> 23 } 24 } 25 26 export default RadioGroup;
使用:
1 const type = { 2 Auto: 0, 3 Use: 1 4 } 5 this.state = { 6 defaultCheckedValue: type.Use, 7 radioOptions: [ 8 { 9 id: "id-auto", 10 value: type.Auto, 11 text: 'auto' 12 { 13 id: "id-use", 14 value: type.Use, 15 text: 'use' 16 }], 17 } 18 19 onActionSelectedChange(e, args) { 20 this.setState(Object.assign(this.state, { 21 defaultCheckedValue: parseInt(e.currentTarget.value), 22 })); 23 }
1 <RadioGroup 2 id={"id"} 3 name={"dqhan-name"} 4 isHorizontal={true} 5 items={this.state.radioOptions} 6 checkedValue={this.state.defaultCheckedValue} 7 checkChanged={this.handleRadioChange} 8 />