react useState入門

昨日に引き続きreactHooksの練習をします　まずはよく使うuseStateから！！

useStateフック

state変数とsetState関数の定義をするフック（API）です

「useState<型>(初期値)」で使います

const [name, setName] = useState<string>('risa');

＜練習＞state変数に初期値セットして画面に表示

npx create-react-app プロジェクト名 --template typescript で作成したプロジェクトを修正しています

プロジェクト名/src配下にcomponentsフォルダを作成し、Header.tsxを作成しました

nameをstate変数にして宣言しています　{変数名}で画面に表示されます

import React, {useState} from 'react';

function Header() {

  const [name, setName] = useState<string>('risa');

  return (
    <header className="App-header">
      Hello! {name}
    </header>
  );
}

export default Header;

App.tsxを修正して上記のHeader.tsxを読み込むようにします

import React from 'react';
import Header from './components/Header';

function App() {
  return (
    <div className="App">
      <Header/>
    </div>
  );
}

export default App;

yarn start で開発サーバを起動すると表示されました！！

＜練習＞入力した名前を画面に表示する

今度はrisaからテキストボックスに入力した名前をフォーカスアウトしたタイミングで表示を切り替えるようにします

components/Header.tsx

import React, {useState} from 'react';

function Header() {

  const [name, setName] = useState<string>('risa');

  function changeName(name:any) {
    setName(name.target.value);
  }

  return (
    <header className="App-header">
      <p>Hello! {name}</p>
      <input type="text" onBlur={e => changeName(e)}/>
    </header>
  );
}

export default Header;

changeName関数を追加してテキストボックス入力値でstate変数を更新しています

フォーカスアウトのイベントはonBlurです

入力した名前で表示を切り替えることができました！

参考

React入門（TypeScript版）