🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 链滴笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

React Visual - 星级比率组件

2019-10-13

描述

渲染一个星级比率组件。

  • 定义一个组件,每颗星星都根据父组件的状态单独调用 Star 进行渲染显示
  • StarRating 组件中使用 React.useState() hook 定义 ratingselection 状态变量,并分别初始化他们的值为 props.rating(如果无效或不支持时为 0)和 0
  • 创建一个 hoverOver 方法,通过提供的 event 来更新 selectedrating
  • 使用 Array.from 创建一个长度为 5 的数组,其中每一项都是一个 <Star> 组件,将这些组件包裹在一个 <div> 元素中。当触发 onMouseLeave 事件时设置 selection0,当触发 onClick 事件时设置 rating,当触发 onMouseOver 事件时设置 selection 为当前 event.target 中的 star-id 属性值
  • 最后,将正确的值专递给每一个 <Star> 组件(starId and marked

实现

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}
    >
      {Array.from({ length: 5 }, (v, i) => (
        <Star
          starId={i + 1}
          key={`star_${i + 1} `}
          marked={selection ? selection >= i + 1 : rating >= i + 1}
        />
      ))}
    </div>
  );
}

使用

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

返回总目录

每天 30 秒系列之 React


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步