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