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 >

        )

    }

}