React入门第一天（绑定事件，动态渲染，修改样式、传参）

案例一：绑定事件，动态渲染

import React, { Component } from 'react'
export default class App extends Component {
 constructor(props){
   super(props);
   // 状态管理
   this.state = {
     num: 1
   }
 }
  render() {
    return (
     <>
      <h2>{this.state.num}</h2>
      {/* 方式一：普通 */}
      <button onClick={()=>this.setState({num: this.state.num + 1})}>按钮1 - 累加</button>
      {/* 方式二：需要改变 this 指向，否则 this 为空 */}
      <button onClick={this.addNum.bind(this)}>按钮2 - 累加</button>
      {/* 方式三：箭头函数 */}
      <button onClick={() =>this.addNum()}>按钮3 - 累加</button>
     </>
    )
  }
  addNum(){
      // 修改状态
      this.setState({num: this.state.num + 1})
  }
}

案例二：修改样式、传参

/* app.css */
.box {
  width: 200px;
  height: 200px;
  background-color:skyblue;
}

import React, { Component } from 'react'
import "./app.css"
export default class App extends Component {
  render() {
    return (
      <div className='box'>
        {/* 传参 */}
        <button onClick={this.btnClick.bind(this, 1)}>按钮1</button>
        <button onClick={this.btnClick.bind(this, 2)}>按钮2</button>
        <button></button>
      </div>
    )
  }
  btnClick(num) {
      console.log(num);
  }
}