iT邦幫忙

2

React 的事件處理與四種方法 (上)

挑戰 React 第十五篇

javascript 與 jsx 事件處理差別

Javascript Jsx
寫法 小寫 onclick 小駝峰 onClick
有無小括弧()
格式 字串 {}
範例 onclick="handleClickMessage()" onClick={handleClickMessage}

實作目標

按了按鈕,訊息改變

為何 React 的事件處理需要 Bind?

執行以下步驟,會說明為什麼需要 Bind。

  1. src資料夾下新增一個 EventBind.js 檔案
  2. EventBind.js 的 Class Component 新增一個 button 按鈕
import React from 'react';
import './App.css';
import EventBind from './EventBind';

function App() {
  return (
    <div className="App">
      <EventBind />
    </div>
  );
}

export default App;
  1. 先試著 yarn start 前兩步驟

確認出現一個 click 按鈕

  1. 若要改變訊息,需新增 state
import React, { Component } from 'react'

class EventBind extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       message: '初始訊息'
    }
  }
  
  render() {
    return (
      <div>
        <div>{this.state.message}</div>
        <button>click</button>
      </div>
    )
  }
}

export default EventBind
  1. 還是先 yarn start 第四步驟

確認有設定的初始訊息

  1. 新增一個按鈕,setState改變訊息
handleClickMessage() {
    this.setState({
      message: '訊息已改變'
    })
  }

  render() {
    return (
      <div>
        <div>{this.state.message}</div>
        <button onClick={this.handleClickMessage}>click</button>
      </div>
    )
  }

按了按鈕,出現 error 訊息

  1. 查看為什麼 undefined?
  handleClickMessage() {
    console.log(this);
    this.setState({
      message: '訊息已改變'
    })
  }

確認找不到綁定的this,因此 setState 才會 undefined

學習心得

今天這篇實作時我一直搞不懂,問了同事為才真正了解了什麼時候 javascript 要加小括弧,什麼時候不用。

  • 若要立即呼叫才需要 + (),
  • 若只是要傳一個function 且沒有要立即呼叫則無需 + ()

除此之外,若 javascript this沒有確認好對象,就會出現範例中的 undefined 錯誤或者找錯對象,這篇實作對我來說受益良多。


尚未有邦友留言

立即登入留言