useMergedRefs

useMergedRefs 是一个合并多个 ref 到单个 ref 的 hook。当你需要在单个 dom 节点上使用多个 ref 时，请使用此 hook。

Usage

即時編輯器

function Demo() {
  const hoverRef = useRef(null);
  const buttonRef = useRef<HTMLButtonElement>(null);
  const isHovered = useHover(hoverRef);
  const [isFocused, toggleFocus] = useToggle(false);

  const mergedRef = useMergedRefs(hoverRef, buttonRef);

  useEffect(() => {
    const handleKeyPress = (event) => {
      if (event.key === 'f' || event.key === 'F') {
        buttonRef.current?.focus();
      }
    };

    window.addEventListener('keypress', handleKeyPress);

    return () => {
      window.removeEventListener('keypress', handleKeyPress);
    };
  }, []);

  const handleFocus = () => toggleFocus(true);
  const handleBlur = () => toggleFocus(false);

  return (
    <div>
      <button
        ref={mergedRef}
        onFocus={handleFocus}
        onBlur={handleBlur}
        style={{
          padding: '10px 20px',
          backgroundColor: isHovered ? 'lightblue' : isFocused ? 'lightyellow' : 'white',
          border: '1px solid black',
          cursor: 'pointer',
          outline: isFocused ? '2px solid blue' : 'none',
        }}
      >
        {isHovered ? '已懸停！' : isFocused ? '已聚焦！' : '懸停或聚焦我'}
      </button>
      <p>按 'F' 鍵聚焦按鈕</p>
    </div>
  );
};

render(<Demo/>)

結果

按 'F' 鍵聚焦按鈕

API

useMergedRef

Returns

(node: T | null) => void: 合併多個 ref 的函數

Arguments

參數名	描述	類型	預設值
refs	-	PossibleRef<T>[]	-

PossibleRef

export type PossibleRef<T> = Ref<T> | undefined;