0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

TypeScript+ReactでのReact HooksとuseState(転何知人T+Rその5)

Last updated at Posted at 2021-07-21

前回までの状態

関数コンポーネントとクラスコンポーネントについて学習した。

今回の目的

  • React Hooksについて
  • useStateについて

クラスコンポーネントの問題点

クラスコンポーネントを使用すれば、state(状況によって変わる値)を使用した状態の管理が可能。
しかし、クラスコンポーネントには問題点があり(詳細は参考文献参照)、関数コンポーネントでも状態の保存ができるフック機能(React Hooks)が追加された。

React Hooksについて

React Hooksとは、クラスコンポーネントの使用なしに状態管理を可能にするもの。

useState

stateを使用する際に使う。書式は以下の通り。

const [stateの変数名, stateを更新する関数名] = useState(stateの初期値);

作成物

完成品

テキストボックスに入力した相手に挨拶するページ。

手順

適当な場所でnpx create-react-appし、React用のプロジェクトフォルダを作る。

npx create-react-app react05 --template typescript

srcフォルダにあるファイルを全て削除し、index.tsxを作成し、以下の内容を書き込む。

import ReactDOM from 'react-dom';
import { useState } from 'react';

const TextOutput = ({ name }: { name: string }) => {
  return (
    <p>Hello, {name}!</p>
  );
}

const TextInput = () => {
  const [str, setStr] = useState('初期値');

  return (
    <div>
    <form >
      <label>
        入力欄<br />
        <textarea
          value={str}
          onChange={event => setStr(event.target.value)}
        />
      </label>
    </form>
    <TextOutput name={str} />
    </div>
  );
}

ReactDOM.render(
  <TextInput />,
  document.getElementById('root')
);

いつも通り、npm startでプロジェクトを実行する。
完成品と同じものが表示されれば成功。

解説

import { useState } from 'react';

useStateを使用するため、インポートしている。

const [str, setStr] = useState('初期値');

strというstateを'初期値'で初期化し、setStrという関数でstrを更新することを宣言している。

<textarea
  value={str}
  onChange={event => setStr(event.target.value)}
/>

str('初期値')が値として入っているテキストエリアで、入力欄に変更があった場合、setStr()によってstrがevent.target.valueに変更される。

要約

関数コンポーネントで状態管理を行う場合、React Hooksを使用する。
useStateで状態管理用の変数と値更新用の関数名を宣言できる。

参考文献

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?