30-seconds-of-react React 30 seconds of React 30 seconds of React 30 seconds of React 30 seconds of React 30 seconds of React

Series of articles:

  • React 30 seconds: Render array data into lists and tables
  • React 30 Seconds learning: Make input fields, password visibility, slider components, drop-down selectors, check box components
  • React 30 seconds: Create multi-line text components that limit the number of characters and words
  • React 30 seconds Speed learning: Implement collapsible, infinite hierarchy tree components
  • React 30 Seconds: Make text components that automatically recognize links
  • React 30 Seconds To Learn: Make accordion components
  • React 30 Seconds Learning: Create a multicast component
  • React 30 Seconds Quick Learning: Make folding panel components
  • React 30 Seconds: Create a countdown component
  • React 30 seconds Quick Learning: Create file drag and drop components
  • React 30 Seconds Speed Learning: Make modal box components
  • React 30 Seconds Learning: Create a star rating component
  • React 30 Seconds Learning: Make TAB components

Star rating component

  • Define a component called “Star” that renders the appropriate appearance for each Star based on the state of the parent component.
  • inStarRatingComponent, used byReact.useState()Hook to defineratingandselectionThe state variable, whose initial value isprops.rating(0 if invalid or not passed) and 0.
  • Create a methodhoverOverAccording to the incomingeventupdateselectedandrating.
  • To create a<div>To the packing<Star>Components that are usedArray.prototype.mapCreated on an array of 5 elements, usingArray.fromCreate and processonMouseLeave 将selectionSet to0The event,onClickEvent setratingandonMouseOverEvents, respectively, willselectionSet toevent.targetthestar-idProperties.
  • Finally, the appropriate values are passed to each<Star>Components (starIdandmarked).

Star components:

function Star({ marked, starId }) {
  return (
    <span star-id={starId} style={{ color: "#ff9933"}}role="button">{/* Empty star, solid star */} {marked? "\u2605" : "\u2606"}</span>
  );
}
Copy the code

Star rating:

function StarRating(props) {
  // The score is displayed
  const [rating, setRating] = React.useState(
    typeof props.rating == "number" ? props.rating : 0
  );
  // Mouse over effect
  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// Mouse over effectonMouseOut={()= >HoverOver (null)} / / click selected score onClick = {event = > setRating (event. The target. The getAttribute (" star - id ") | | rating)} OnMouseOver ={hoverOver} > {/* Create 5 components */} {Array.<Star
          starId={i + 1}
          key={`star_The ${i + 1} `}
          marked={selection ? selection >= i + 1 : rating >= i + 1}
        />
      ))}
    </div>
  );
}
Copy the code

example

export default function() {
  return <div>
    <StarRating />
    <StarRating rating={2} />
  </div>;
}
Copy the code
  • The sample code
  • Running effect