react 02 组件state click
一,组件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; // 函数式组件 return
function Hello(props) {
let titleName = <p> 这是 Hello副标题 </p> return (
<div> <h1>今天天气:{props.weather} </h1> {titleName} </div>
) //在组件中 必须返回一个合法的虚拟jsx dom 元素
}
// 类组件
class Hi extends React.Component {
render() {
return (
<div><h1>今天天气:{this.props.weather} </h1></div>
)
}
}
ReactDOM.render(
<div>
<Hello weather="出太阳" />
<Hi weather="出太阳"/>
</div>,
document.getElementById('root')
);
二,组件状态state
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; //这种写法组件不能自动更新 class Hello extends React.Component {
// 状态-私有
constructor(props) {
super(props)
this.state = {
time:new Date().toLocaleTimeString()
}
}
// 视图
render() {
// 下面不加eslint 报错
// eslint-disable-next-line
this.state.time = new Date().toLocaleTimeString()
return (
<div><h1>当前时间:{this.state.time}</h1></div>
)
}
} ReactDOM.render(
<div>
<Hello />
</div>,
document.getElementById('root')
); setInterval(()=>{
// 反复渲染同一组件,不会重复渲染,所以要在render 的时候重新赋值
ReactDOM.render(
<div>
<Hello />
</div>,
document.getElementById('root')
);
},1000)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; class Hello extends React.Component {
// 状态-私有
constructor(props) {
super(props)
this.state = {
time:new Date().toLocaleTimeString()
}
console.log(this.state.time)
}
// 视图
render() {
return (
<div><h1>当前时间:{this.state.time}</h1></div>
)
}
// 生命周期
componentDidMount() {
setInterval(()=>{
// setState()
this.setState({time:new Date().toLocaleTimeString()})
},1000)
}
} ReactDOM.render(
<div>
<Hello />
</div>,
document.getElementById('root')
)
三,点击事件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; class Hello extends React.Component {
constructor(props) {
super(props)
this.state = {
c1:'active',
c2:'content'
}
// 改变show1 的this 指向
this.show1 = this.show1.bind(this)
}
render() {
return (
<div>
<button onClick={this.show}>不传参写法</button>
<button onClick={()=>this.show('1')}>一</button>
<button onClick={()=>this.show('2')}>二</button>
{/* 此时show1 的this 指向的是button 所以要改一下指向 */}
<button data-index="1" onClick={this.show1}>一</button>
<button data-index="2" onClick={this.show1}>二</button>
<div className={this.state.c1}>内容一</div>
<div className={this.state.c2}>内容二</div>
</div>
)
}
show(arg) {
console.log(arg)
if(arg === '1') {
this.setState({
c1:'active',
c2:'content'
})
}else {
this.setState({
c2:'active',
c1:'content'
})
} }
show1(e) {
console.log(e.target.dataset.index)
let arg = e.target.dataset.index
if(arg === '1') {
this.setState({
c1:'active',
c2:'content'
})
}else {
this.setState({
c2:'active',
c1:'content'
})
}
}
} ReactDOM.render(
<div>
<Hello />
</div>,
document.getElementById('root')
)
react 02 组件state click的更多相关文章
- 【05】react 之 组件state
1.1. 状态理解 React的数据流:由父节点传递到子节点(由外到内传递),如果顶层组件某个prop改变了,React会向下传递,重新渲染所有使用过该属性的组件.除此之外React 组件内部还具有 ...
- React子组件怎么改变父组件的state
React子组件怎么改变父组件的state 1.父组件 class Father extends React.Component { construtor(props){ super(props); ...
- React 三大属性state,props,refs以及组件嵌套的应用
React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...
- react 编写组件 五
看以下示例了解如何定义一个组件 // 定义一个组件LikeButton var LikeButton = React.createClass({ // 给state定义初始值 getInitialSt ...
- React 面向组件化编程 - 封装了webpack - npm run build 产生的包的 /static 引用路径问题
React 面向组件化编程 面向对象 ----> 面向模块 ----> 面向组件 套路: 注意: 组件名必须大写开头: 只能有一个根标签: <input />虚拟DOM 元素必 ...
- vue 和react中子组件分别如何向父组件传值
vue子组件和父组件双向传值: 子: Vue.component("childComponent",{ template:`<div><p @click='pos ...
- react教程 — 组件的生命周期 和 执行顺序
一.组件执行的生命周期: 参考 https://www.cnblogs.com/soyxiaobi/p/9559117.html 或 https://www.c ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- React Native组件之Switch和Picker和Slide
React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...
- 初识React,Virutal DOM, State以及生命周期
这是React分类下的第一篇文章,是在了解了一些基本面后,看Tyler文章,边看边理解边写的. React可以看做是MVC中的V,关注的是视图层.React的组件就像Angular的Directive ...
随机推荐
- JavaScript:操作符:空值合并运算符(??)
这是一个新增的运算符,它的功能是: 对于表达式1 ?? 表达式2,如果表达式1的结果是null或者undefined时,返回表达式b的结果:否则返回表达式a的结果: 它与赋值运算符结合使用,即??=, ...
- QT中常用控键
1.TableWidget类 1.1. 表格属性设置 1.1.1设置行列属性 //设置行列均分 tableWidget->horizontalHeader()->setStretchLas ...
- 4、Idea设置显示多行文件
使用IDEA时,可能会没有注意到,一旦打开过多的Java文件时,默认会堆积在一行显示,就像浏览器打开了多个标签一样,此时需要通过右侧箭头筛选的方式来选择其他文件.为了解决这一问题,需要打开多行显示的方 ...
- Hadoop详解(07) - Hdfs数据压缩
Hadoop详解(07) - Hdfs数据压缩 概述 压缩技术能够有效减少底层存储系统(HDFS)读写字节数.压缩提高了网络带宽和磁盘空间的效率.在运行MR程序时,I/O操作.网络数据传输. Shuf ...
- python进阶之路9文件的处理方法
内容回顾 字典内置方法 1.类型转换 dict() 2.重要操作 get() d[key] = values 常用 pop() update() 键存在则修改键值对 键不存在则新增键值对 fromke ...
- group by 语句怎么优化?
一.一个简单使用示例 我这里创建一张订单表 CREATE TABLE `order_info` ( `id` int NOT NULL AUTO_INCREMENT COMMENT '主键', `or ...
- Java基础学习笔记-流程控制
Java程序结构 顺序结构 分支选择结构 循环结构 顺序结构 分支选择结构 if-else Switch case Switch case 注意点 要配合break,要不就会一直往下走 case 值必 ...
- 本地python环境安装kylin项目依赖时报认证错误信息
问题描述:项目需要连接kylin数据库查询数据,本地安装kylin项目的依赖环境后报认证错误 python版本3.7 32位 pycharm版本 2022版 成功方法: 更换解释器选择无解释器,创建虚 ...
- P13_协同工作_小程序权限管理的概念以及成员管理的两个方面
协同工作和发布 - 协同工作 了解权限管理需求 在中大型的公司里,人员的分工非常仔细:同一个小程序项目,一般会有不同岗位.不同角色的员工同时参与设计与开发. 此时出于管理需要,我们迫切需要对不同岗位. ...
- STM32F1库函数初始化系列:DMA—ADC采集
1 void ADC_Configure(void) 2 { 3 ADC_InitTypeDef ADC_InitStructure; 4 GPIO_InitTypeDef GPIO_InitStru ...