挑战 React 第十五篇

javascript 与 jsx 事件处理差别

JavascriptJsx写法小写 onclick小驼峰 onClick有无小括弧()有无格式字串{}範例onclick="handleClickMessage()"onClick={handleClickMessage}

实作目标

按了按钮，讯息改变

为何 React 的事件处理需要 Bind?

执行以下步骤，会说明为什么需要 Bind。

在 src资料夹下新增一个 EventBind.js 档案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;

先试着 yarn start 前两步骤

确认出现一个 click 按钮

若要改变讯息，需新增 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

还是先 yarn start 第四步骤

确认有设定的初始讯息

新增一个按钮，setState改变讯息

handleClickMessage() {    this.setState({      message: '讯息已改变'    })  }  render() {    return (      <div>        <div>{this.state.message}</div>        <button onClick={this.handleClickMessage}>click</button>      </div>    )  }

按了按钮，出现 error 讯息

查看为什么 undefined?

  handleClickMessage() {    console.log(this);    this.setState({      message: '讯息已改变'    })  }

确认找不到绑定的this，因此 setState 才会 undefined

学习心得

今天这篇实作时我一直搞不懂，问了同事为才真正了解了什么时候 javascript 要加小括弧，什么时候不用。

若要立即呼叫才需要 + ()，若只是要传一个function 且没有要立即呼叫则无需 + ()

除此之外，若 javascript this没有确认好对象，就会出现範例中的 undefined 错误或者找错对象，这篇实作对我来说受益良多。