[react] React useImperativeHandle

程式碼連結

useRef

如果要在 React 使用像是 input focus 的 DOM 方法，可以透過 useRef 來達到以上需求。

App.js

import { useRef } from "react";
import "./App.css";

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

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div className="App">
      <button onClick={focusInput}>Focus</button>

      <input type="text" placeholder="type..." ref={inputRef} />
    </div>
  );
}

export default App;

但要是今天 input 是被包裝在 Component 內的話，ref 就不會起作用，因為 ref 是綁定在 Component 上，並不是 input jsx。

App.js

import { useRef } from "react";
import "./App.css";
import Input from "./Input";

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

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div className="App">
      <button onClick={focusInput}>Focus</button>
      <Input ref={inputRef} />
    </div>
  );
}

export default App;

Input.js

import React from "react";

const Input = () => {
  return (
    <>
      <h2>Input</h2>
      <input type="text" placeholder="type..." />
    </>
  );
};

export default Input;

forwardRef

而我們可以使用 forwardRef 來取得 Parent Component(App.js)傳遞過來的 ref。

在 Input Component 使用 forwardRef，並將 ref 輸出到 console。

Input.js

import React, { forwardRef } from "react";

const Input = forwardRef((props, ref) => {
  console.log(ref);

  return (
    <>
      <h2>Input</h2>
      <input type="text" placeholder="type..." />
    </>
  );
});

export default Input;

可以看到我們成功取得了從 Parent Component 傳遞過來的 ref 了。

useImperativeHandle

接著可以透過 useImperativeHandle 來綁定 function 給 Parent Component 使用。

這邊要注意的是，我們一樣需要在 Input Component 使用 useRef，並將 ref 綁定在 input jsx 標籤上，這樣才能知道待會要 focus 哪一個元素。

Input.js

import React, { useRef, forwardRef, useImperativeHandle } from "react";

const Input = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focusInput: () => {
      inputRef.current.focus();
    },
  }));

  return (
    <>
      <h2>Input</h2>
      <input type="text" placeholder="type..." ref={inputRef} {...props} />
    </>
  );
});

export default Input;

綁定完 function 後，現在可以在 Parent Component 去使用 focusInput function 了

App.js

import { useRef } from "react";
import "./App.css";
import Input from "./Input";

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

  //使用Child Component綁定的focusInput function
  const focusInput = () => {
    inputRef.current.focusInput();
  };

  return (
    <div className="App">
      <button onClick={focusInput}>Focus</button>

      <Input ref={inputRef} />
    </div>
  );
}

export default App;