使用 ref 引用值

暖暖De幸福發表於2024-11-08

當你希望元件“記住”某些資訊，但又不想讓這些資訊 觸發新的渲染 時，你可以使用 ref 。

const ref = useRef(0);

useRef 返回一個這樣的物件:

{ 
  current: 0 // 你向 useRef 傳入的值
}

與 state 一樣，ref 在重新渲染之間由 React 保留。但是，設定 state 會重新渲染元件，而更改 ref 不會！

可以使用 ref 來儲存 timeout ID、DOM 元素 和其他不影響元件渲染輸出的物件。

使用 ref 操作 DOM

import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        聚焦輸入框
      </button>
    </>
  );
}

相關文章