Reactでinputタグに入力した文字列を取得する

方法

Reactでinputタグに入力した文字列を取得するにはuseRefを使用します。

具体的なコード

下記コードでは「文字列を取得」ボタンを押すとブラウザのコンソールにinputタグに入力した文字列が出力されるコードです。

App.js

import { useState, useRef } from "react";

function App() {

  const textRef = useRef();

  const getText = () =>{
    console.log(textRef.current.value);
  };

  return (
    <>
      <input type="text" ref={textRef}></input>
      <button onClick={getText}>文字列を取得</button>
    </>
  );
}

export default App;

注意点

下記の記載を忘れないようにしましょう。

・inputタグのref
・buttonタグのonClick