• 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(thisthis.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 >
            )
        }
    }
  • 相关阅读:
    每天一点正能量
    嵌入式开发-写在这里作为参照
    产品设计与开发 之 开发流程和组织架构
    产品设计与开发 之 开头语
    机器视觉基础
    项目与运营
    3.Linux如何管理分区
    2.Linux系统之硬盘与分区基础知识
    1.Linux入门介绍
    shell笔记
  • 原文地址:https://www.cnblogs.com/cnblogso/p/12194077.html
Copyright © 2020-2023  润新知