iT邦幫忙

2022 iThome 鐵人賽

DAY 14
0
Modern Web

Dear React 修煉之路系列 第 14

(D-14) Dear React 修煉之路:React State -2 | useState

  • 分享至 

  • xImage
  •  

useState
useState 屬於 React Hook 的一種,回傳一個包含兩個值的 Array
使用語法為 const [state, setState] = useState(state的初始值)

//舉例
const[age, setAge] = useState("10歲");

setAge("20歲");

上方例子中的意思是,宣告了一個age的變數,第一個age的初始值是10歲
後方的setAge則是「更新初始值的方法」,在第二行呼叫了setAge並賦予值
這時候原本age10歲,將會被改變為20歲

接著以下例子我們建立一個Button的Function,並在Function中賦予名稱為count
變數,透過呼叫setCount的方法,在我們每一次點擊按鈕時對count初始值往上+1

import React, { useState } from "react";

function Button() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Button;

初始值
https://ithelp.ithome.com.tw/upload/images/20220929/20148303eRaOM7di7N.png
點擊按鈕1次
https://ithelp.ithome.com.tw/upload/images/20220929/20148303o8Yz5jIgWJ.png
點擊按鈕2次
https://ithelp.ithome.com.tw/upload/images/20220929/20148303BNGLDwDxxd.png


上一篇
(D-13) Dear React 修煉之路:React State -1
下一篇
(D-15) Dear React 修煉之路:React State -3 | useEffect
系列文
Dear React 修煉之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言