React中DOM事件和狀態介紹

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

// 無狀態元件內部不需要維護資料，因此可以簡寫成函數
 let Demo = () => <button>按鈕</button>
 // 定義換一換元件
 class Demo extends Component {
 // 初始化狀態資料
 constructor(props) {
      // 建構函式繼承
      super(props);
      // console.log(this.props, props)
      // 初始化狀態
      this.state = {
          num: 0
      }
  }
 // 定義子檢視列表
 createChildList(arr) {
      // 將陣列成員轉成span
      return arr.map((item, index) => <span key={index}>{item}</span>)
  }
  // 建立新聞列表
  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++;
      // 更新狀態
      // 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>
      )
  }
}