重构-单选框(颜色、大小、禁用、回调和个数)

你的名字 2021-07-25 01:00 285阅读 0赞

实现:
    	单选框不能设置样式,所以使用div包裹并设置两个div绝对定位覆盖在单选框上,并使得div层级降低,使得能够响应单选框的onChange事件
    	第一个div为未点击时样式,第二个div为点击样式
    	通过动态添加类名等实现传递参数改变样式
    
    使用:
    	参数
    		label:Proptypes.string,			单选框标签
            color:Proptypes.string,			单选框颜色
            size:Proptypes.string,				单选框大小
            values:Proptypes.array,			单选框内容数组,会根据数组内容自动生成单选框
            onChange:Proptypes.func,		点击回调,第一个参数为点击单选框的索引
            disabled:Proptypes.any			是否禁用

代码示例:  
效果图:  
![在这里插入图片描述][20201119151538750.png_pic_center]  
禁用:  
![在这里插入图片描述][20201119151612105.png_pic_center]

实现:

import React,{ Component} from 'react'
    import Proptypes from 'prop-types'
    import './index.css'
    
    class App extends Component{ 
        
        static propTypes={ 
            label:Proptypes.string,
            disabled:Proptypes.bool,
            color:Proptypes.string,
            size:Proptypes.string,
            values:Proptypes.array,
            onChange:Proptypes.func,
            disabled:Proptypes.any
        }
    
        static defaultProps={ 
            color:"green",
            size:'16px',
            values:['内容1','内容2']
        }
        
        state={ 
            currentIndex:-1,
            className:['jf-radio']
        }
    
        componentDidMount()
        { 
            
        }
    
        _onChange(e,index)
        { 
            let className=this.state.className;
             
            this.setState({ 
                currentIndex:index,
                className:this.state.className
            })
    
            this.props.onChange(index);
    
        }
    
        render()
        { 
            const { currentIndex,className} = this.state;
            const { color,size,values,disabled} = this.props;
            
            return(
    
                <div className='jf-container'>
                    { 
                        values.map((item,index)=>{ 
                            return (
                                
                                <div className={ `${ disabled&&'jf-disabled'} jf-item`} key={ item}>
                                    <div style={ { width:size,height:size}} className='jf'>
                                        { index==currentIndex&&<div style={ { backgroundColor:color}} className='jf-checked'></div>}
                                        <div className={ className.join(" ")}></div>
                                        <input id={ item} style={ { width:size,height:size}}  onChange={ disabled?function(){ }:(e)=>{ this._onChange(e,index)}} name='one' className={ `${ disabled&&'jf-disabled-radio'} radio`} aria-hidden="true" type="radio"/>
                                    </div>
                                    <label htmlFor={ item} style={ { lineHeight:size,cursor:disabled?'not-allowed':'pointer'}}>{ item}</label>     
                                </div>
                            )
                        })
                    }
                                    
                    
                </div>
            )
        }
    }
            
    export default App

css:

.radio{ 
        width: 20px;
        height: 20px;
        opacity: 0;
        cursor: pointer;
    }
    .jf-container{ 
        display:flex;
        
    }
    .jf-item{ 
        display:flex;
        align-items:'center';
        margin: 10px 10px;
        cursor: pointer;
        
    }
    .jf{ 
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 20px;
        width: 20px;
        border-radius: 100%;
        cursor: pointer;
    }
    
    .jf-radio{ 
        position: absolute;
        background-color: white;
        border:solid 1px #ccc;
        border-radius: 50%;
        left: 0;
        bottom: 0;
        right: 0;
        top: 0;
        z-index: -1;
        cursor: pointer;
    }
    
    .jf-checked{ 
        position: absolute;
        background-color: red;
        border-radius: 50%;
        left: 0;
        bottom: 0;
        right: 0;
        top: 0;
    }
    
    .jf-disabled{ 
        cursor: not-allowed;
        opacity: 0.4;
    }
    .jf-disabled-radio{ 
        cursor: not-allowed;
        opacity: 0;
    }

使用:

{ /* disabled */}
       <Radio color={ "pink"} size="18px" values={ ['内容1','内容2']} onChange={ this._onChange.bind(this)}></Radio>

[20201119151538750.png_pic_center]: /images/20210724/26419763b71345e792da6b3a773533c6.png
[20201119151612105.png_pic_center]: /images/20210724/c0a426fae7ea4ad397113e5393ed6800.png