useInteractions

import {useInteractions} from '@floating-ui/react';

像 useHover() 和 useFocus() 这样的交互钩子有两件事：他们在 Hook 内设置了独立工作的 Effects，并返回旨在传递给元素以添加其功能的事件处理程序。

¥Interaction Hooks like useHover() and useFocus() do two things: they set up Effects inside the Hook that work on their own, and return event handlers intended to be passed to the elements to add their functionality.

用法

¥Usage

useInteractions() 接受从交互 Hooks 返回的值的数组，将它们的事件处理程序合并到用于渲染的 prop getter 中：

¥useInteractions() accepts an array of the values returned from interaction Hooks, merging their event handlers into prop getters used for rendering:

import {
  useFloating,
  useHover,
  useFocus,
  useInteractions,
} from '@floating-ui/react';
 
function App() {
  const {context} = useFloating();
 
  const hover = useHover(context);
  const focus = useFocus(context);
 
  const {getReferenceProps, getFloatingProps} = useInteractions([
    hover,
    focus,
  ]);
}

返回值

¥Return value

interface UseInteractionsReturn {
  getReferenceProps(
    userProps?: React.HTMLProps<Element>,
  ): Record<string, unknown>;
  getFloatingProps(
    userProps?: React.HTMLProps<HTMLElement>,
  ): Record<string, unknown>;
  getItemProps(
    userProps?: React.HTMLProps<HTMLElement>,
  ): Record<string, unknown>;
}

Hook 返回两个核心 prop getter，一个用于引用元素，一个用于浮动元素。这些 prop getter 应该分布到元素上：

¥The Hook returns two core prop getters, one for the reference element and one for the floating element. These prop getters should be spread onto the elements:

<>
  <div ref={refs.setReference} {...getReferenceProps()} />
  <div
    ref={refs.setFloating}
    style={floatingStyles}
    {...getFloatingProps()}
  />
</>

你传入的所有事件处理程序都应该通过 prop getter 完成，而不是元素本身：

¥All event handlers you pass in should be done so through the prop getter, not the element itself:

<div
  ref={refs.setReference}
  {...getReferenceProps({
    onClick: () => console.log('clicked'),
    onFocus: () => console.log('focused'),
  })}
/>

这是因为你的处理程序可能被覆盖或覆盖 Hooks 的处理程序之一。未来版本中还可能添加更多事件处理程序。

¥This is because your handler may be either overwritten or overwrite one of the Hooks’ handlers. More event handlers may also be added in future versions.

getItemProps

在处理浮动元素内的列表时，会为 item 元素返回第三个 prop getter，这并不是所有类型的浮动元素都需要的。有关列表框（例如选择框或组合框）或菜单角色的 prop getter 的更多信息，请参阅 useRole。

¥A third prop getter is returned for item elements when dealing with a list inside the floating element, which is not required for all types of floating elements. See useRole for more information on this prop getter for listbox (e.g. select or combobox) or menu roles.

const {
  getReferenceProps, 
  getFloatingProps, 
  getItemProps
} = useInteractions([]);