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 >
)
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/156217.html
標籤：JavaScript
上一篇：JS高級---陣列和偽陣列
下一篇：一起學Vue之串列渲染