落とし穴

createRef γ―δΈ»γ«γ‚―γƒ©γ‚Ήγ‚³γƒ³γƒγƒΌγƒγƒ³γƒˆγ§δ½Ώη”¨γ•γ‚ŒγΎγ™γ€‚ι–’ζ•°γ‚³γƒ³γƒγƒΌγƒγƒ³γƒˆγ§γ―ι€šεΈΈδ»£γ‚γ‚Šγ« useRef を用います。

createRef は任意�?ε€€γ‚’δΏζŒγ§γγ‚‹ ref γ‚ͺγƒ–γ‚Έγ‚§γ‚―γƒˆγ‚’δ½œζˆγ—γΎγ™γ€‚

class MyInput extends Component {
  inputRef = createRef();
  // ...
}

γƒͺフゑレンス

createRef()

createRef γ‚’ε‘Όγ³ε‡Ίγ—γ¦γ€γ‚―γƒ©γ‚Ήγ‚³γƒ³γƒγƒΌγƒγƒ³γƒˆε†…γ§ ref γ‚’οΏ½?�言します。

import { createRef, Component } from 'react';

class MyComponent extends Component {
  intervalRef = createRef();
  inputRef = createRef();
  // ...

さらに例を見る

εΌ•ζ•°

createRef γ―εΌ•ζ•°γ‚’ε–γ‚ŠγΎγ›γ‚“γ€‚

θΏ”γ‚Šε€€

createRef γ―ε˜δΈ€οΏ½?γƒ—γƒ­γƒ‘γƒ†γ‚£γ‚’ζŒγ€γ‚ͺγƒ–γ‚Έγ‚§γ‚―γƒˆγ‚’θΏ”γ—γΎγ™γ€‚

  • current: null γ«εˆζœŸεŒ–γ•γ‚Œγ¦γ„γΎγ™γ€‚εΎŒγ§δ»–οΏ½?ε€€γ«γ‚»γƒƒγƒˆγ™γ‚‹γ“γ¨γŒγ§γγΎγ™γ€‚JSX γƒŽγƒΌγƒ‰οΏ½? ref ε±žζ€§γ¨γ—γ¦ React に ref γ‚ͺγƒ–γ‚Έγ‚§γ‚―γƒˆγ‚’ζΈ‘γ™γ¨γ€React はそ�? current γƒ—γƒ­γƒ‘γƒ†γ‚£γ‚’ι©εˆ‡γ«γ‚»γƒƒγƒˆγ—γΎγ™γ€‚

注意点

  • createRef は常に異γͺγ‚‹γ‚ͺγƒ–γ‚Έγ‚§γ‚―γƒˆγ‚’θΏ”γ—γΎγ™γ€‚γ“γ‚Œγ―θ‡ͺεˆ†γ§ { current: null } を書く�?γ¨εŒη­‰γ§γ™γ€‚
  • ι–’ζ•°γ‚³γƒ³γƒγƒΌγƒγƒ³γƒˆγ§γ―γ€εŒγ˜γ‚ͺγƒ–γ‚Έγ‚§γ‚―γƒˆγ‚’εΈΈγ«θΏ”γ™ useRef γ‚’δ»£γ‚γ‚Šγ«δ½Ώη”¨γ™γ‚‹γ“γ¨γ‚’γŠε‹§γ‚γ—γΎγ™γ€‚
  • const ref = useRef() は const [ref, _] = useState(() => createRef(null)) γ¨εŒη­‰γ§γ™γ€‚

使用法

γ‚―γƒ©γ‚Ήγ‚³γƒ³γƒγƒΌγƒγƒ³γƒˆγ§ ref γ‚’οΏ½?�言する

γ‚―γƒ©γ‚Ήγ‚³γƒ³γƒγƒΌγƒγƒ³γƒˆε†…γ§ ref γ‚’οΏ½?�言するには、createRef を呼び出し、そ�?η΅ζžœγ‚’γ‚―γƒ©γ‚Ήγƒ•γ‚£γƒΌγƒ«γƒ‰γ«ε‰²γ‚Šε½“γ¦γΎγ™γ€‚

import { Component, createRef } from 'react';

class Form extends Component {
  inputRef = createRef();

  // ...
}

γ“γ‚Œγ§ JSX οΏ½? <input> に ref={this.inputRef} を渑すと、React は this.inputRef.current γ‚’ input οΏ½? DOM γƒŽγƒΌγƒ‰γ«γ‚»γƒƒγƒˆγ—γΎγ™γ€‚δΎ‹γˆγ°δ»₯δΈ‹οΏ½?γ‚ˆγ†γ«γ—γ¦γ€input γ‚’γƒ•γ‚©γƒΌγ‚«γ‚Ήγ™γ‚‹γƒœγ‚Ώγƒ³γ‚’δ½œγ‚‹γ“γ¨γŒγ§γγΎγ™γ€‚

import { Component, createRef } from 'react';

export default class Form extends Component {
  inputRef = createRef();

  handleClick = () => {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <>
        <input ref={this.inputRef} />
        <button onClick={this.handleClick}>
          Focus the input
        </button>
      </>
    );
  }
}

落とし穴

createRef γ―δΈ»γ«γ‚―γƒ©γ‚Ήγ‚³γƒ³γƒγƒΌγƒγƒ³γƒˆγ§δ½Ώη”¨γ•γ‚ŒγΎγ™γ€‚ι–’ζ•°γ‚³γƒ³γƒγƒΌγƒγƒ³γƒˆγ§γ―ι€šεΈΈδ»£γ‚γ‚Šγ« useRef を用います。

代替手�?οΏ½

createRef γ‚’δ½Ώγ£γŸγ‚―γƒ©γ‚Ήγ‹γ‚‰ useRef γ‚’δ½Ώγ£γŸι–’ζ•°γΈοΏ½?移葌

ζ–°γ—γ„γ‚³γƒΌγƒ‰γ§γ―γ‚―γƒ©γ‚Ήγ‚³γƒ³γƒγƒΌγƒγƒ³γƒˆοΏ½?δ»£γ‚γ‚Šγ«ι–’ζ•°γ‚³γƒ³γƒγƒΌγƒγƒ³γƒˆοΏ½?δ½Ώη”¨γ‚’ζŽ¨ε₯¨γ—ます。δ»₯下に、createRef γ‚’δ½Ώη”¨γ—γ¦γ„γ‚‹ζ—’ε­˜οΏ½?γ‚―γƒ©γ‚Ήγ‚³γƒ³γƒγƒΌγƒγƒ³γƒˆγŒγ‚γ‚‹ε ΄εˆοΏ½?η§»θ‘Œζ–Ήζ³•γ‚’η€Ίγ—γΎγ™γ€‚γ“γ‘γ‚‰γŒε…ƒοΏ½?コードです。

import { Component, createRef } from 'react';

export default class Form extends Component {
  inputRef = createRef();

  handleClick = () => {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <>
        <input ref={this.inputRef} />
        <button onClick={this.handleClick}>
          Focus the input
        </button>
      </>
    );
  }
}

こ�?γ‚³γƒ³γƒγƒΌγƒγƒ³γƒˆγ‚’γ‚―γƒ©γ‚Ήγ‹γ‚‰ι–’ζ•°γ«η§»θ‘Œγ™γ‚‹ε ΄εˆγ€createRef οΏ½?呼び出しを useRef οΏ½?呼び出しに�?γζ›γˆγΎγ™γ€‚

import { useRef } from 'react';

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

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

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}
PreviouscreateFactoryNextisValidElement

How do you like these docs?