zoukankan      html  css  js  c++  java
  • 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 />
  • 相关阅读:
    PHP header的几种用法
    Elasticsearch 学习笔记
    elsearch 安装过程中遇到的错误解决方式
    python常用模块
    python 列表和字段的相关函数
    Nginx+Redis+Ehcache大型高并发高可用三层架构总结
    Docker技术底层架构剖析
    ELK日志分析平台环境部署 (yum安装)
    禁止root直接登陆linux系统
    浅谈Rsync+Inotify实时同步
  • 原文地址:https://www.cnblogs.com/moran1992/p/9390646.html
Copyright © 2011-2022 走看看