A, functionality,

  • Review rating
  • Realize multiple evaluation linkage

(Note: Since diagrams are not launched, you can copy the code into the project to see the effect.)

Technology: the Taro

Second, the implementation

First of all, let’s think about how to implement a comment level. Let’s write a random UI like this

When I click on a star, all the previous stars will be filled, so we just need to fill in the previous ⭐️, without further words, directly to the encapsulated code

Interface IProps {length: number // Number of props onChange: (index) => void // Callback for filling changes fill: } export default function Star({length, onChange, fill } :IProps) { return ( <View className={styles.star} > { Array(length).fill('').map((value, index) => <View data-key={index + 1} className={styles.banner} style={{backgroundImage: (index < fill) ? `url(${fill_star})` : `url(${star})`}} onClick={(e) => onChange(e.currentTarget.dataset.key)} /> ) } </View> ) }Copy the code

This code can achieve a star rating

Then we should consider multiple evaluation linkage, what does this mean? It is similar to an order evaluation, including overall evaluation, satisfaction, etc. Often the logic is that several evaluations are independent of each other, but when I click on the overall evaluation of five stars, the others are five stars, not five stars, it does not affect. I directly use the star code package on the line, because it is relatively simple, send a section of business code on the line, can be directly used

Const arr = [{id: 'a', name: 'overall evaluation, the fill: 1}, {id:' b ', name: 'satisfaction, the fill: 1}, {id:' c ', name: 'Satisfaction 2', fill: -1}] export default function LinkageStar() { const [ stars, SetStars] = useState(arr) const handleClick = (number, type) => { let starArr = [ ...stars ] if(type === 'a' && number === 5) { starArr.forEach((el) => el.fill = number) }else  { starArr.forEach((el) => { if(el.id === type) { el.fill = number } }) } setStars(starArr) } return ( <View> { stars.map((value) => <View className={styles.evaluate} key={value.id}> <View className={styles.content} > <View className={styles.title} >{value.name}</View> </View> <View className={styles.starBox}> <Star length={5} onChange={(number) => handleClick(number, value.id)} fill={value.fill} /> </View> </View> ) } </View> ) } LinkageStar.config = { navigationBarTitleText: 'Satisfaction survey ',}Copy the code

The effect

When the first item is five stars, the second and third items will also become five stars.