一个基于rax的评分组件

来源：互联网发布：招商银行外汇交易软件编辑：程序博客网时间：2024/06/13 00:05

最近再做一个类似商城系统的项目，做到一个评价模块的时候需要用到一个类似五星好评的功能，

看了一下我们用的组件库（Nuke）发现暂时还没有类似的组件，所以就自己动手简单的实现了一个

效果差不多就是这样的：

核心的思路就是在点击五角星的时候将选中的五角星个数存到state中，然后在render()的时候在根据这个state来渲染出对应个数的黄色五角星，以及剩余的灰色五角星。

基本的实现比较简单就直接贴代码了;

rate(index){                if(this.state.star == 0 && index == 0){    //在一星的时候通过点击一星将选中变为0            this.setState({                star:-1            })        }else{            this.setState({                star:index            })        }    }     render() {        const { arr } = this.state;        let star = [];        if(arr){            star = arr.map((val,index)=>{                if(index <= this.state.star){                    return(                        <Text onPress={()=>{this.rate(index)}} style={styles.actived}>★</Text>                    )                }else{                    return(                        <Text onPress={()=>{this.rate(index)}} style={styles.defalut}>★</Text>                    )                }            });        }        return (            <View style={{flexDirection:'row'}}>                {star}            </View>        );    }const styles = {    actived:{        fontSize:'70rem',        color:'#f5a623'    },    defalut:{        fontSize:'70rem',        color:'#aaaaaa'    }};

实现了基本功能之后还有时间，就想着拓展一下这个组件的功能；

最后决定添加一下几个功能：

1、设置是否只读； <Yrate disable />

2、自定义字符； <Yrate character='好'/>

3、自定义五角星（或其他字符）的总数； <Yrate count={6}/>

4、设置默认选中个数； <Yrate defaultValue={3}/>

5、添加改变选个个数时的事件：onChange; <Yrate onchange={(e)=>console.log(e)}/>

整个组件的代码和文档如下：

/** * Created by b on 2017/7/26. */import {createElement, Component, render} from 'rax';export default class Yrate extends Component {    constructor() {        super();        this.state = {};    }    componentDidMount() {        const { character,disabled,count,defaultValue } = this.props;        let arr = [];        if(count){            for(let i = 0;i<count;i++){                arr.push(i+1) //根据count来设置个数            }        }else{            arr = [1,2,3,4,5] //默认个数是5        }        this.setState({            character:character?character:'★',             disabled,            arr,            star:defaultValue?defaultValue-1:4   //设置默认选中个数，默认值是5        })
    }

rate(index){        if(this.props.onChange){            this.props.onChange(index+1);        }        if(this.state.star == 0 && index == 0){            this.setState({                star:-1            })        }else{            this.setState({                star:index            })        }    }    disabled(){        alert('对不起你不能修改！')    }    render() {        const { arr,character,disabled } = this.state;        let star = [];        if(arr){            star = arr.map((val,index)=>{                if(index <= this.state.star){                    return(                        <Text onPress={()=>{disabled?this.disabled():this.rate(index)}} style={styles.actived}>{character}</Text>                    )                }else{                    return(                        <Text onPress={()=>{disabled?this.disabled():this.rate(index)}} style={styles.defalut}>{character}</Text>                    )                }            });        }        return (            <View style={{flexDirection:'row'}}>                {star}            </View>        );    }}const styles = {    actived:{        fontSize:'70rem',        color:'#f5a623'    },    defalut:{        fontSize:'70rem',        color:'#aaaaaa'    }};

属性            说明               类型          默认值disabled   只读，无法进行交互     boolean          falsecharacter  自定义字符（不支持emoji）text              ★count       star总数               number            5defaultValue   默认值               number            5onChange   选择时的回调        Function(number)        -

阅读全文

0 0