React.forwardRef - 從子組件獲取值

Question

想象一下我們有這樣的代碼：

const InputComponent = React.forwardRef((props, ref) => {
  // I need to access ref.current?.value... here
  return <input ref={ref} {...props} />
})

const Parent = () => {
  const inputRef = useRef()


  return <InputComponent ref={ref} />
}

這種技術似乎是不可能的？ InputComponent 中的typeof ref是InputComponent但無法調用。 我可以從InputComponent訪問值嗎？

Answer 1

除了拼寫錯誤，您的代碼應該可以工作，唯一需要注意的是，您在第一次渲染時沒有 ref，因此可選鏈接current?.value 。

而且因為它是一個 ref，改變輸入值不會觸發渲染，所以要調試它的值，你需要手動觸發它。

import "./styles.css";
import React, { useReducer, useRef } from "react";

const InputComponent = React.forwardRef((props, ref) => {
  console.log(ref.current?.value);
  return <input ref={ref} {...props} />;
});

const Parent = () => {
  const inputRef = useRef();
  const [, render] = useReducer((p) => !p, false);

  return (
    <>
      <InputComponent ref={inputRef} />
      <button onClick={render}>trigger render to see ref value</button>
    </>
  );
};

export default function App() {
  return <Parent />;
}