当前位置： 移动技术网 > IT编程>开发语言>JavaScript > react初始

react初始

2020年01月15日  | 移动技术网IT编程  | 我要评论 
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 >
        )
    }
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网