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

海面有风

已于 2022-03-08 19:41:57 修改

阅读量1.4k

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2022-03-08 19:38:14 首次发布

本文链接：https://blog.csdn.net/weixin_44659458/article/details/123361184

版权

React 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

这篇博客介绍了在React中如何进行事件绑定和动态渲染。通过示例代码展示了三种不同的事件处理方法，包括使用bind、箭头函数以及直接在属性中调用方法。同时，文章还演示了如何修改组件样式和传递参数给事件处理函数，实现元素样式的动态变化和按钮点击的参数传递。

摘要由CSDN通过智能技术生成

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

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