react初始

import React, { Component } from 'react'
import "./footer.css"; //引入外部樣式表

export default class footer extends Component { //這裡的extends繼承父類的屬性和方法，但是沒有自己的屬性和方法
    constructor(props) {
        super(props);
        this.state = {
            num: 10
        }
        // this.num = 1;
        this.show9 = this.show9.bind(this);
        // this.show9 = this.show9.apply(this); //用call和apply會直接調用函數頁面刷新時就會調用show9
        console.log(this, this.show9);
    }
    show4() {
        alert(1111 + "聲明的函數show");
    }
    show5 = () => {
        alert(this.state.num + "聲明的箭頭函數");
    }
    show7 = (content) => {
        alert(content + "帶參數的箭頭函數");
    }
    show8 = () => {
        alert("bind函數");
    }
    show9() {
        alert(this.state.num);
    }
    render() {
        return (
            <div>
                <h3 className="footer">我是尾部</h3>
                <button onClick={function () { alert("按鈕1" + 1111) }}>按鈕1</button>
                <button onClick={() => { alert("按鈕2箭頭函數" + 222) }}>按鈕2</button>
                <button onClick={(e) => { e.target.style.color = "red"; alert("事件源e") }}>按鈕3</button>
                <button onClick={this.show4}>按鈕4</button>
                <button onClick={this.show5}>按鈕5</button>
                <button onClick={() => { alert(this.state.num + "按鈕6") }}>按鈕6</button>
                <button onClick={() => { this.show7("777") }}>按鈕7</button>
                <button onClick={this.show8.bind(this)}>按鈕8</button>
                <button onClick={this.show9}>按鈕9</button>
                {/* this.show9直接寫在{}中直接調用函數 */}
            </div >
        )
    }
}