React 30 秒速学：制做星级评分组件

时间 2019-11-21

标签 react 制做星级评分组件栏目 React 繁體版

原文原文链接

本文译自：30-seconds-of-react 。 React 30 秒速学：精选有用的 React 片断，30-seconds-of-react 的中文版本，已所有完成翻译、上线，地址：30-seconds-of-react-zh_CN-umi 。react

系列文章：git

星级评分组件

定义一个名为“Star”的组件，它将根据父组件的状态为每一个星形呈现适当的外观。
在StarRating组件中，使用React.useState()钩子来定义rating和selection状态变量，初始值为props.rating（若是无效或未传入，则为 0 ）和 0 。
建立一个方法hoverOver，根据传入的event更新selected和rating。
建立一个<div>来包装<Star>组件，这些组件是使用Array.prototype.map在5个元素的数组上建立的，使用Array.from建立，并处理onMouseLeave 将selection设置为0的事件，onClick事件设置rating和onMouseOver事件，分别将selection设置为event.target的star-id属性。
最后，将适当的值传递给每一个<Star>组件（starId和marked）。

星星组件：github

function Star({ marked, starId }) {
  return (
    <span star-id={starId} style={{ color: "#ff9933" }} role="button"> {/* 空星，实星 */} {marked ? "\u2605" : "\u2606"} </span>
  );
}
复制代码

星级评分：数组

function StarRating(props) {
  // 分数显示
  const [rating, setRating] = React.useState(
    typeof props.rating == "number" ? props.rating : 0
  );
  // 鼠标移入效果
  const [selection, setSelection] = React.useState(0);
  const hoverOver = event => {
    let val = 0;
    if (event && event.target && event.target.getAttribute("star-id"))
      val = event.target.getAttribute("star-id");
    setSelection(val);
  };
  return (
    <div // 鼠标移入效果 onMouseOut={() => hoverOver(null)} // 点击选中分数 onClick={event => setRating(event.target.getAttribute("star-id") || rating) } onMouseOver={hoverOver} > {/* 建立5个组件 */} {Array.from({ length: 5 }, (v, i) => ( <Star starId={i + 1} key={`star_${i + 1} `} marked={selection ? selection >= i + 1 : rating >= i + 1} /> ))} </div> ); } 复制代码

例子post

export default function() {
  return <div> <StarRating /> <StarRating rating={2} /> </div>; } 复制代码