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

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

React 在body上绑定事件以及阻止事件冒泡
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>R ...
克里金插值详细步骤_openlayers4 入门开发系列之前端动态渲染克里金插值 kriging 篇（附源码下载）...
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
React入门第一弹——为什么国内大厂更钟爱react框架？
React 入门 React简介为何国内大厂更多使用React? React是Facebook用来创建用户界面的JS库,在2013年开源的.React不是一个MVC框架,而是一个用于构建组件化UI的 ...
点击事件调用匿名函数如何传参_事件发布/订阅模式的简单实现
这是一种广泛应用于异步编程的模式,是回调函数的事件化,常常用来解耦业务逻辑.事件的发布者无需关注订阅的侦听器如何实现业务逻辑,甚至不用关注有多少个侦听器存在.数据通过消息的方式可以灵活的传递. --& ...
《微信小程序案例4》bindtap点击事件使用自定义数据data-xxx传参方法
一.错误方法 bindtap="selected(1)" 二.正确方法 1.首先在标签中使用data-xxx来自定义要传入的数据,xxx代表数据值 2.绑定事件bindtap=xx ...
React入门第一个程序及使用JS和JSX的区别
JS和JSX都能用来写React 但是JSX相对来说会简便些,语法规则只是在JS的基础上多了一点点,还是比较推荐使用JSX,以下用代码举例二者区别. 使用JSX创建React: <!DOCTYP ...
鼠标事件以及 onmouseover, onmouseout 鼠标移动事件动态渲染的注意点
1.onmouseover 指的是鼠标在进入某个元素的时候触发的事件 2.onmouseout 指的是鼠标在离开某个元素时触发的事件其他 onclick----------------------- ...
vue 动态的修改样式
需要为元素配置ref属性 <template>  <div class="id_container" ref='i ...
[ExtJs] 控件初始化绑定事件 initialize 和 painted的区别
在使用ExtJs时,对于一些页面控件在初始化时希望绑定事件用于值修改时触发,通常会在控件初始化或控件展示时绑定. 一般常用的事件主要有initialize.added.beforeshow.activ ...
小程序 | 小程序中常用的事件 + 事件对象的属性列表 +小程序事件传参 + 小程序全局配置 + 小程序页面配置 + 小程序发起网络数据请求
文章目录一.WXML 模板语法数据绑定事件绑定 ⭐小程序中常用的事件 ⭐事件对象的属性列表 target 和 currentTarget 的区别 bindtap 的语法格式在事件处理函数中为 ...

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

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

案例二：修改样式、传参

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

最新文章

热门文章