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>; } 複製代碼

相關標籤/搜索