[React] UseRef

UseRef

DOMを操作したい時に使います.
DOMにアクセスすることで、DOM APIを使用することができます.

import React, { useState, useRef } from "react";

function InputSample() {
  const [inputs, setInputs] = useState({ name: "", nickname: "" });
  const { name, nickname } = inputs;
  
  const nameInput = useRef();

 ...
  
  const onReset = () => {
    setInputs({
      name: "",
      nickname: ""
    });
    
    nameInput.current.focus();
    
  };

  return (
    <div>
      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
        ref={nameInput}
      />
      
      ...
      
    </div>
  );
}

export default InputSample;

userefの使い方は簡単です.

上記のようなInput Boxが2つある場合は、すべての値を記入して初期化ボタンを押します.
名前Input Boxでフォーカスを調整しましょう

上部にuserefをインポートし、名前をnameInputとしてuserefを呼び出します.
名前Inputはref={nameInput}、onResetはnameInput.current.focus()と書いて終わりました.nameInput.current.まで書いた後あとで欲しいDOM APIを選んで作成すればいいです.

初期化ボタンを押すと、名前Input Boxにフォーカスが合わせられます.😊