useRef（）钩子

Question

我目前在我的React 16.9项目中正在努力使用DRY和useRef组合。

我的功能

const rangeSlider = useRef();
const rangeBullet = useRef();

window.addEventListener("input", showSliderValue, false);

function showSliderValue() {
  const bulletPosition = (rangeSlider.current.value /rangeSlider.current.max);
  rangeBullet.current.style.left = ((bulletPosition*1.15)  * 270)  + "px";
}

引用使用情况

<div>
  <p ref={rangeBullet}>100</p>
  <input type="range" ref={rangeSlider} min="0.3" max="3" step="0.01"  value={cartObject.tableWidth} onChange={e => setCartObject({...cartObject, tableWidth: e.target.value})} />        
</div>
<hr/>

我的问题是，我现在需要另外5个具有相同功能的输入字段。 由于useRef必须是唯一的，因此我目前已通过重复执行该功能5次来解决此问题。有没有更平滑的方法来解决此问题？

非常感谢所有建议。

Answer 1

我建议创建您自己的“ RangeInput”组件，并将所有这些引用实现隐藏在其中。 只是不要忘记取消订阅那些有关组件卸载的事件。

您可能还考虑完全不使用window.addEventListener和refs，而是使用controlled component模式并根据范围值计算样式。