React.useState()

2569 ワード
React テキストリンク

useState


構成部品で変更する値の使用
[]に現在のステータスと更新する値を含め、usState()に初期値を作成します.
const [num, setNum] = useState(0);
上のコードは下のコードと同じです.
const numState = useState(0);
const num = numState[0]
const setNum = numState[1]

例によるusStateの理解


(+1)ボタンをクリックするだけで数字が増え、
(-1)ボタンをクリックした場合、数字をマイナスにしないように減らしてみます.
import React, { useState } from "react";

function Counter() {
  const [num, setNum] = useState(0);

  const onIncrease = () => {
    setNum((preNum) => preNum + 1);
  };

  const onDecrease = () => {
    setNum((preNum) => (preNum <= 0 ? 0 : preNum - 1));
  };
  return (
    <div>
      <h1>{num}</h1>
      <button onClick={onIncrease}>+ 1</button>
      <button onClick={onDecrease}>- 1</button>
    </div>
  );
}

export default Counter;

マイナスボタンを押してもマイナスにならないように3つの演算子を使用しています.
const onDecrease = () => {
    setNum((preNum) => (preNum <= 0 ? 0 : preNum - 1));
  };
BOJ 6593商業ビル
temp: patch