useRef() 钩子的 DRY 问题

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，而是使用受控组件模式并根据范围值计算样式。