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

Posted 2022-03-10 岁月可贵

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

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