Reactガイドを読んでいくその92

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

RefとDOM

Ref と関数コンポーネント

関数コンポーネントはインスタンスがない。
そのためref属性を関数コンポーネントに使うことは不可能。

function ImpossibleComponent() {
  return <input />;
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }
  render() {
    // これは動かない
    return (
      <ImpossibleComponent ref={this.textInput} />
    );
  }
}

関数コンポーネントにRefが必要な場合はライフサイクルメソッドやstateと同様
コンポーネントをクラスに変換しなければならない。
ただし、DOM要素またはクラスコンポーネントを参照している限り関数コンポーネント内でref属性を使用することは可能。

function CustomTextInput(props) {
  // ref が参照できるように、textInput をここで宣言する。
  let textInput = React.createRef();

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

  return (
    <div>
      <input
        type="text"
        ref={textInput} />  // これは参照できる

      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );
}

今日はここまで。