【发布时间】：2021-03-29 15:30:34
【问题描述】：
我目前有一个评分系统，它可以产生 5 颗星，可以显示一半的值。我通过使用 FontAwesome 的半星来做到这一点，并做了一些 CSS 技巧让它们看起来像一颗星。但是我想通过想出一种只显示一半 SVG 图标的方法来增加我的 React 和 CSS 知识。因此，我可以使用用户想要的任何图标，而不是使用半星，并且它只会显示 50% 的图标，例如，如果你想给出 3.5 分。
问：您能否只显示图标的一半并以某种方式知道用户是点击一侧还是另一侧？
这是我目前使用 HalfStars 做一点参考的代码
import React, { useState } from 'react'
import { FaRegStarHalf, FaStarHalf } from 'react-icons/fa'
import './styles/Rater.css'
const Rater = ({ iconCount }) => {
const [rating, setRating] = useState(null)
const [hover, setHover] = useState(null)
// check if user has set a rating by clicking a star and use rating to determine icons
const Star = rating ? FaStarHalf : FaRegStarHalf
return (
<div>
{[...Array(iconCount), ...Array(iconCount)].map((icon, i) => {
const value = (i + 1) / 2
return (
<label>
<input
type='radio'
name='rating'
value={value}
onClick={() => {
console.log(`value => `, value)
return setRating(value)
}}
/>
<div className='star-container'>
<div>
<Star
className={i % 2 ? 'star-left' : 'star'}
color={value <= (hover || rating) ? '#ffc107' : '#e4e5e9'}
onMouseEnter={() => setHover(value)}
onMouseLeave={() => setHover(null)}
/>
</div>
</div>
</label>
)
})}
</div>
)
}
export default Rater
【问题讨论】：
-
如果您希望能够显示半颗星，并检测点击了哪一半，最简单的方法是将（半）星显示为
<a>标签的背景图像。这意味着您还必须设置标签的宽度，以便只显示一半的 SVG，因此您可能需要将标签的display属性更改为inline-block。 -
这个答案可能会有所帮助：stackoverflow.com/questions/29368138/…
-
您可以使用 CSS
clip-path来屏蔽星星，然后检查点击处理程序是否点击的坐标位于图标的前半部分或后半部分。
标签： javascript css reactjs svg react-icons