iT邦幫忙

0

了解 React state 與簡單實作

挑戰 React 第十二篇

什麼是 React state?

我們上篇有提到,可使用 props 渲染我們要的資訊,但props是唯讀的,那萬一我要在 component 裡改變資訊怎麼辦?

state 這時候就派上用場。

props Vs state

props state
傳遞方式 可從父組件傳入子組件 只能在該component使用,為private
唯讀? 否,可改變狀態
Class Component使用方式 this.props this.state
function Component使用方式 props useState Hook

實作範例

目標

Hi Visitor 按下 button 後,訊息變成 Hi Tom

  1. 在 app.js 檔案裡面加入 Hi Component
function App() {
  return (
    <div className="App">
      <Hi />
    </div>
  );
}
  1. 新增一個 Hi.js 檔案,並新增以下程式碼
import React, { Component} from 'react';

class Hi extends Component {

  render() {
    return <h1>Hi Visitor</h1>
  }

export default Hi
  1. yarn start 第二步驟成果

  2. 使用 state ,通常 this.state 會寫在 constructor

class Hi extends Component {
  constructor() {
    super();
    //預設訊息為 Hi Visitor
    this.state = {
      message: "Hi Visitor"
    }
  }
  render() {
    //回傳 this.state 的預設訊息
    return <h1>{this.state.message}</h1>
  }
 
}

export default Hi  
  1. yarn start 第四步驟結果

  1. 新增一個 button 叫做 changeMessage ,此 function 為改變預設 state 的內容
import React, { Component} from 'react';

class Hi extends Component {
  constructor() {
    super();
    this.state = {
      message: "Hi Visitor"
    }
  }

  changeMessage() {
    this.setState({
      message: "Hi Tom"
    })
  }
  render(){
    return (
    <div>
      <h1>{this.state.message}</h1>
      // es6 arrow function 綁定此class
      <button onClick={() => this.changeMessage()}>button</button>
    </div>
    )
  }
}

export default Hi
  1. yarn start 第六步驟畫面

  1. 按下「 改變訊息 」按鈕,成功看到 Hi Tom

把預設的 Hi Visitor,換成 setState 的訊息

學習心得

此篇為簡單的實作,我自己在看官網的時間範本(setState現在的時間取得當前時間的組件)看得蠻吃力的,所以先寫稍微簡單的一篇講述什麼是state,還有可以看到程式碼有寫一個註解用es6綁定此class,這個之後會再拉出來一篇特別敘述。


尚未有邦友留言

立即登入留言