【初心者向け】React+TypeScript+Hooksでフォーム入力値を表示させる

こんにちはおたけいです

ReactとTypeScriptでフロントエンドの開発をしているのですが、なかなかとっつきづらいと思うので初心者向けにフォームに入力した値を表示するところまでやっていきたいと思います。

React+TypeScript環境構築

まずは環境構築です。すでに済んでいる方は飛ばしてもらって大丈夫です。
今回はCreate React Appを使っていきます

まずはNodeJSがインストールされているかを確認します
terminalに下記のコマンドを入力してください

terminal

node --version

こんな感じでバージョンがでてきたらOK

バージョンが出てこない人はNodeJSを下記の公式のHPからダウンロード
https://nodejs.org/ja/

次はCreate React Appをインストールします
terminalに下記のコマンドを入力してください

terminal

npm install -g create-react-app

※permission errorが出る場合には下記を実行（sudoの意味はちゃんと調べてから使ってくださいね！）

terminal

sudo npm install -g create-react-app

ファイルを作成するところに移動してterminalに下記のコマンドを入力してください
今回はmyappというプロジェクトを作成してくれます

terminal

npx create-react-app --template typescript myapp

command not found になってしまったら下記を参考にpathを通してください
https://qiita.com/Mikenerian/items/5e9801342a8373ab518f

さきほど作成したプロジェクトのディレクトリに移動して
terminalに下記のコマンドを入力してください

terminal

npm start

ブラウザが立ち上がってReactのマークがくるくるしていれば無事に作成完了です！

入力フォームを表示させてみる

無事にプロジェクトを作成できたところで早速実装していきます。
デフォルトで入っているapp.tsx を下記の内容に書き換えてください

src/app.tsx

import React,{useState} from 'react';

const App:React.FC<{}> = () => {

  return (
    <div>
      <p>firstname</p>
      <input name="firstname" type="text" /><br />
      <p>lastname</p>
      <input name="lastname" type="text" /><br />
    </div>
  )
}

export default App;

ブラウザには画像のように表示されていると思います。
これでフォームの表示までは完了です。

入力フォームの値を表示させる

次にフォームに入力した値を画面に表示してみます。
ここではHooksというReactの機能をつかって入力値を画面に表示させてみます。
app.tsx を下記の内容に書き換えてください

src/app.tsx

import React,{useState} from 'react';

const App:React.FC<{}> = () => {

  const [firstname,setFirstname] = useState<string>()
  const [lastname,setLastname] = useState<string>()

  return (
    <div>
      <p>firstname</p>
      <input name="firstname" type="text" value={firstname} onChange={(e) => setFirstname(e.target.value)} /><br />
      <p>lastname</p>
      <input name="lastname" type="text" value={lastname} onChange={(e) => setLastname(e.target.value)} /><br />
      <p>
        {firstname},{lastname}
      </p>
    </div>
  )
}

export default App;

これでフォームに入力した値を画面に表示できます。

onChangeイベントを別の関数として設定することも可能です。
下記の内容に書き換えても同様の動きをしてくれます。

src/app.tsx

import React,{useState} from 'react';

const App:React.FC<{}> = () => {

  const [firstname,setFirstname] = useState<string>()
  const [lastname,setLastname] = useState<string>()

  const changeFirstName = (event: React.ChangeEvent<HTMLInputElement>)  =>  {
    setFirstname(event.target.value)
  }

  const changeLastName = (event: React.ChangeEvent<HTMLInputElement>)  =>  {
    setLastname(event.target.value)
  }

  return (
    <div>
      <p>firstname</p>
      <input name="firstname" type="text" value={firstname} onChange={changeFirstName} /><br />
      <p>lastname</p>
      <input name="lastname" type="text" value={lastname} onChange={changeLastName} /><br />
      <p>
        {firstname},{lastname}
      </p>
    </div>
  )
}

export default App;

まとめ

簡単でしたが以上です。
inputフォームの値をevent.target.valueでとってきてstateにセットするだけですが
なれないとスムーズに行かない所も多いと思います。
初心者の方で詰まっている方がいれば参考にしてください。