reactjs 在单个React元素上使用多个引用

rt4zxlrg 于 2023-03-12 发布在 React

关注(0)|答案(3)|浏览(104)

我使用的是this recipe中定义的useHover() react钩子，钩子返回一个ref和一个布尔值，表示用户当前是否悬停在ref标识的元素上，可以这样使用...

function App() {
  const [hoverRef, isHovered] = useHover();

  return (
    <div ref={hoverRef}>
      {isHovered ? 'Hovering' : 'Not Hovering'}
    </div>
  );
}

现在让我们假设我想使用另一个（假设的）钩子useDrag，它返回一个ref和一个布尔值，指示用户是否在页面上拖动当前元素。

function App() {
  const [hoverRef, isHovered] = useHover();
  const [dragRef, isDragging] = useDrag();

  return (
    <div ref={[hoverRef, dragRef]}>
      {isHovered ? 'Hovering' : 'Not Hovering'}
      {isDragging ? 'Dragging' : 'Not Dragging'}
    </div>
  );
}

这是行不通的，因为ref prop只能接受单个引用对象，而不是上面示例中的列表。
如何解决这个问题，以便在同一个元素上使用多个这样的钩子？我找到了一个package，看起来可能就是我要找的，但我不确定是否遗漏了什么。

reactjs

来源：https://stackoverflow.com/questions/60270678/using-multiple-refs-on-a-single-react-element

3条答案

按热度按时间

xesrikrc1#

下面介绍了一种简单的方法。
注意：元素上的ref属性接受一个函数，这个函数稍后会在元素或节点可用时调用。

function App() {
  const myRef = useRef(null);

  return (
    <div ref={myRef}>
    </div>
  );
}

因此，上面的myRef是具有定义的函数

function(element){
 // something done here
}

因此，简单的解决方案如下所示

function App() {
  const myRef = useRef(null);
  const anotherRef = useRef(null);

  return (
    <div ref={(el)=> {myRef(el); anotherRef(el);}}>
    </div>
  );
}

赞(0）回复(0）举报 2023-03-12

g0czyy6m2#

React ref实际上只是一些可变数据的容器，存储为current属性。

{
  current: ... // my ref content
}

考虑到这一点，你应该能够整理出来的手：

function App() {
  const myRef = useRef(null);

  const [hoverRef, isHovered] = useHover();
  const [dragRef, isDragging] = useDrag();

  useEffect(function() {
    hoverRef.current = myRef.current;
    dragRef.current = myRef.current;
  }, [myRef.current]);

  return (
    <div ref={myRef}>
      {isHovered ? 'Hovering' : 'Not Hovering'}
      {isDragging ? 'Dragging' : 'Not Dragging'}
    </div>
  );
}

赞(0）回复(0）举报 2023-03-12

6kkfgxo03#

按照@Doc-Han所说的，如果你需要一个引用，也需要一个表单注册表来输入，你可以这样做：

function App() {
  const myRef = useRef(null);
  const { register } = useForm({ defaultValues });

  const setRefs = useCallback((element) => {
    myRef.current = element;
    register({ required: 'First name is required.' })(element);
  }, [myRef, register]);

  return (
    <input ref={setRefs} />
  );
}

赞(0）回复(0）举报 2023-03-12

我来回答

reactjs 在单个React元素上使用多个引用

3条答案

相关问题

热门标签

最新问答