如何实现点击更新React Semantic UI进度条的数值

这个需求完全可以实现，不需要对组件做自定义封装改造，基于Progress原生的事件透传、ref绑定能力就能完成。

实现原理 #

• 用Ref拿到Progress组件渲染的真实DOM容器，点击事件触发时，计算鼠标点击位置到进度条左边界的偏移量，除以进度条自身总宽度得到位置占比
• 把占比换算成0-100区间的合法百分比后，更新原本维护进度值的state就行。因为进度条宽度是均匀分布的，点在正中间时，偏移量刚好是总宽度的一半，算出来就是50%，完全符合你要的交互效果。

参考实现代码 #

import { useState, useRef } from 'react'
import { Progress } from 'semantic-ui-react'

const ClickableProgress = () => {
  // 原有控制进度展示值的状态
  const [value, setValue] = useState(0)
  // 绑定进度条DOM的ref
  const progressRef = useRef(null)

  // 点击更新进度的处理逻辑
  const handleProgressClick = (e) => {
    // 获取进度条容器的位置尺寸信息
    const rect = progressRef.current.getBoundingClientRect()
    // 计算目标百分比，同时钳制在0-100的合法范围，避免边界外点击算出来非法值
    const targetPercent = Math.max(
      0,
      Math.min(
        100,
        Math.round((e.clientX - rect.left) / rect.width * 100)
      )
    )
    setValue(targetPercent)
  }

  return (
    <Progress
      ref={progressRef}
      percent={value}
      onClick={handleProgressClick}
      // 加可点击的鼠标样式，让用户能感知到这个组件可以交互
      style={{ cursor: 'pointer' }}
    />
  )
}

小提示 #

• 代码里的范围钳制是为了避免用户点到进度条左右边界外面时，算出负数或者超过100的值，导致进度条显示不符合预期
• 后续如果需要做拖拽调整进度的效果，只要在现有逻辑基础上，补充鼠标移动、鼠标抬起的事件监听就行，不用大改。

内容的提问来源于stack exchange，提问作者gordie