hooks-usState()の使用

8945 ワード
React hooks テキストリンク
これはreactihookの公式サイトと浅い実務経験です.
これは1年以上かけて開発された関数です.
まず、タイプスクリプトES 6環境でテストを行いました.

👉 stateに初期値を入れる


イベントを実行する前に、ステータス値のデフォルト値nameをYunaとして指定しました.
ここでも値を追加できます.
nameに加えて、「,」やage、addressなどの異なる値を追加することもできます.
値の後にデータ型を記入するのは、タイプスクリプトを使用しているため、あらかじめタイプを指定しています.
import { useState } from "react";
import 'AppTest.scss';

function AppTest() {

  const [state, setState] = useState({
    name: 'Yuna' as string,
    age: 18 as number,
    address: '서울시 성동구'
  });

  return (
    <div className="Information">
      <h1 className="name">NAME : {state.name}</h1>
      <h1 className="age">AGE : {state.age}</h1>
      <h1 className="address">ADDRESS : {state.address}</h1>
    </div>
  );
}
export default AppTest;
実行後、結果は次のようになります.

👉 ステータス値をsetStateに変更


stateの値を取得しました.stateのname値を変更する方法を説明します.-)
import { useState } from "react";
import 'AppTest.scss';

function AppTest() {

  const [state, setState] = useState({
    name: 'Yuna' as string,
  });

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setState({ name: e.target.value });
  }

  return (
    <div className="Information">
      <div className="Information">
      <h1 className="name">NAME : {state.name}</h1>
    </div>
      <input type="text" onChange={onChange}></input>
    </div>
  );
}
export default AppTest;
Inputウィンドウを作成して値を入力した場合は、setStateを使用してイベントに値を追加できます.
stateのname値が変更されます.

ここでは簡単なstate,setStateのまとめです:-)
注意:https://ko.reactjs.org/docs/hooks-intro.html
オブジェクト向けの原理とスプリング
CSS Flex