<div onclick="fn"></div>
? ? react中綁定事件
<div onClick={this.fn}></div>

// 定義類
?class Demo extends Component {
? // 事件回調函數
? clickBtn(e) {
? ? ? console.log(this, arguments)
? ? ? // console.log(e.target, e.currentTarget)
? }
? // 渲染
? render() {
? ? ? return (
? ? ? ? ? <div>
? ? ? ? ? ? ? <button onClick={this.clickBtn}><span>按鈕</span>1</button>
? ? ? ? ? ? ? {/*更改this*/}
? ? ? ? ? ? ? <button onClick={this.clickBtn.bind(this, 100, 'hello', true)}>按鈕2</button>
? ? ? ? ? ? ? <button onClick={e => this.clickBtn(100, e, 'demo', false)}>按鈕3</button>
? ? ? ? ? ? ? {/*工作中，不建議綁定組件之外的其他對象*/}
? ? ? ? ? ? ? <button onClick={this.clickBtn.bind(obj)}>按鈕4</button>
? ? ? ? ? </div>
? ? ? )
? }
}

// 無狀態(tài)組件內部不需要維護數據，因此可以簡寫成函數
?let Demo = () => <button>按鈕</button>
?// 定義換一換組件
?class Demo extends Component {
?// 初始化狀態(tài)數據
?constructor(props) {
? ? ? // 構造函數繼承
? ? ? super(props);
? ? ? // console.log(this.props, props)
? ? ? // 初始化狀態(tài)
? ? ? this.state = {
? ? ? ? ? num: 0
? ? ? }
? }
?// 定義子視圖列表
?createChildList(arr) {
? ? ? // 將數組成員轉成span
? ? ? return arr.map((item, index) => <span key={index}>{item}</span>)
? }
? // 創(chuàng)建新聞列表
? createList() {
? ? ? // console.log(this)
? ? ? // 獲取數據長度
? ? ? let len = this.props.data.length;
? ? ? return this.props.data.map((item, index) => {
? ? ? ? ? // 遍歷第二維數組,如果num與index相等，要顯示
? ? ? ? ? return <li key={index} style={{
? ? ? ? ? ? ? display: this.state.num % len === index ? '' : 'none'
? ? ? ? ? }}>{this.createChildList(item)}</li>
? ? ? })
? }
? // 事件回調函數
? toggle() {
? ? ? // 更新num
? ? ? // var num = this.state.num;
? ? ? // // 下一頁
? ? ? // num++;
? ? ? // 更新狀態(tài)
? ? ? // this.setState({ num })
? ? ? // 簡化成一步
? ? ? this.setState({
? ? ? ? ? // 先加再更新
? ? ? ? ? num: ++this.state.num
? ? ? })
? }
? // 定義渲染方法
? render() {
? ? ? return (
? ? ? ? ? <div>
? ? ? ? ? ? ? {/*<span onClick={this.toggle.bind(this)}>換一換</span>*/}
? ? ? ? ? ? ? <span onClick={e => this.toggle(e)}>換一換</span>
? ? ? ? ? ? ? {/*新聞列表*/}
? ? ? ? ? ? ? <ul>{this.createList()}</ul>
? ? ? ? ? </div>
? ? ? )
? }
}