Zenn
🪞

MUIのTextFieldに useRef を使う際の注意点

2024/01/20に公開
React
mui
tech

refではなく、inputRef属性に useRef を設定

TestFieldに対して、useRef を使いたい時は、input タグの情報(入力内容など)を取得したいことがほとんど(だと思う。)

そのため、refではなく、inputRef属性に useRef を設定する必要がある。

props 対象
ref TextField全体(つまり div タグ)
inputRef TextFieldの中にあるinputタグ

検証

以下は、検証用のコンポーネント。
TextFieldに対して、refとinputRefの両方にuseRefを設定している。

const ConfirmationToPersonInCharge = () => {
  const divRef = useRef<HTMLDivElement>(null);
  const textFieldRef = useRef<HTMLInputElement>(null);

  const onClick = () => {
    console.log(divRef.current);
    console.log(textFieldRef.current);
  };

  return (
    <>
      <TextField ref={divRef} inputRef={textFieldRef} />
      <Button onClick={onClick}>Click</Button>
    </>
  );
};

上のコンポーネントで、onClickが発火すると以下の結果が得られる。
divRefでは、divタグ全体、textFieldRefでは、inputタグの情報が得られることがわかる。

<!-- console.log(divRef.current); -->
<div class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root">
  <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-1hgf8cx-MuiInputBase-root-MuiOutlinedInput-root">
    <input aria-invalid="false" id=":r3:" type="text" class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input" value="">
    <fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline">
      <legend class="css-ihdtdm"><span class="notranslate">​</span></legend>
    </fieldset>
  </div>
</div>

<!-- console.log(textFieldRef.current); -->
<input aria-invalid="false" id=":r3:" type="text" class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input" value="">

公式ドキュメントでもちゃんと説明されている

inputRefの説明

input要素への参照を渡す。(翻訳 by DeepL)

inputRefの説明

refの説明

このrefはルート要素への参照を渡す。(翻訳 by DeepL)

refの説明

Discussion