星级评分

渲染一个星级评分组件。

• 定义一个 Star 组件。它根据父组件的状态渲染每个单独的星星，并显示适当的外观。
• 定义一个 StarRating 组件。使用 useState() 钩子来定义 rating 和 selection 状态变量，并设置适当的初始值。
• 创建一个名为 hoverOver 的方法，根据提供的 event 更新 selected，使用事件目标的 .data-star-id 属性，如果传入 null 参数，则将其重置为 0。
• 使用 Array.from() 创建一个包含 5 个元素的数组，并使用 Array.prototype.map() 创建单独的 <Star> 组件。
• 使用 hoverOver 处理包装元素的 onMouseOver 和 onMouseLeave 事件。使用 setRating 处理 onClick 事件。

.star {
  color: #ff9933;
  cursor: pointer;
}

const Star = ({ marked, starId }) => {
  return (
    <span data-star-id={starId} className="star" role="button">
      {marked ? '\u2605' : '\u2606'}
    </span>
  );
};

const StarRating = ({ value }) => {
  const [rating, setRating] = React.useState(parseInt(value) || 0);
  const [selection, setSelection] = React.useState(0);

  const hoverOver = event => {
    let val = 0;
    if (event && event.target && event.target.getAttribute('data-star-id'))
      val = event.target.getAttribute('data-star-id');
    setSelection(val);
  };
  return (
    <div
      onMouseOut={() => hoverOver(null)}
      onClick={e => setRating(e.target.getAttribute('data-star-id') || rating)}
      onMouseOver={hoverOver}
    >
      {Array.from({ length: 5 }, (v, i) => (
        <Star
          starId={i + 1}
          key={`star_${i + 1}`}
          marked={selection ? selection >= i + 1 : rating >= i + 1}
        />
      ))}
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <StarRating value={2} />
);