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 >
)
}
}