一,组件

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的更多相关文章

  1. 【05】react 之 组件state

    1.1.  状态理解 React的数据流:由父节点传递到子节点(由外到内传递),如果顶层组件某个prop改变了,React会向下传递,重新渲染所有使用过该属性的组件.除此之外React 组件内部还具有 ...

  2. React子组件怎么改变父组件的state

    React子组件怎么改变父组件的state 1.父组件 class Father extends React.Component { construtor(props){ super(props); ...

  3. React 三大属性state,props,refs以及组件嵌套的应用

    React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...

  4. react 编写组件 五

    看以下示例了解如何定义一个组件 // 定义一个组件LikeButton var LikeButton = React.createClass({ // 给state定义初始值 getInitialSt ...

  5. React 面向组件化编程 - 封装了webpack - npm run build 产生的包的 /static 引用路径问题

    React 面向组件化编程 面向对象 ----> 面向模块 ----> 面向组件 套路: 注意: 组件名必须大写开头: 只能有一个根标签: <input />虚拟DOM 元素必 ...

  6. vue 和react中子组件分别如何向父组件传值

    vue子组件和父组件双向传值: 子: Vue.component("childComponent",{ template:`<div><p @click='pos ...

  7. react教程 — 组件的生命周期 和 执行顺序

    一.组件执行的生命周期:                  参考  https://www.cnblogs.com/soyxiaobi/p/9559117.html  或  https://www.c ...

  8. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  9. React Native组件之Switch和Picker和Slide

    React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...

  10. 初识React,Virutal DOM, State以及生命周期

    这是React分类下的第一篇文章,是在了解了一些基本面后,看Tyler文章,边看边理解边写的. React可以看做是MVC中的V,关注的是视图层.React的组件就像Angular的Directive ...

随机推荐

  1. JavaScript:操作符:空值合并运算符(??)

    这是一个新增的运算符,它的功能是: 对于表达式1 ?? 表达式2,如果表达式1的结果是null或者undefined时,返回表达式b的结果:否则返回表达式a的结果: 它与赋值运算符结合使用,即??=, ...

  2. QT中常用控键

    1.TableWidget类 1.1. 表格属性设置 1.1.1设置行列属性 //设置行列均分 tableWidget->horizontalHeader()->setStretchLas ...

  3. 4、Idea设置显示多行文件

    使用IDEA时,可能会没有注意到,一旦打开过多的Java文件时,默认会堆积在一行显示,就像浏览器打开了多个标签一样,此时需要通过右侧箭头筛选的方式来选择其他文件.为了解决这一问题,需要打开多行显示的方 ...

  4. Hadoop详解(07) - Hdfs数据压缩

    Hadoop详解(07) - Hdfs数据压缩 概述 压缩技术能够有效减少底层存储系统(HDFS)读写字节数.压缩提高了网络带宽和磁盘空间的效率.在运行MR程序时,I/O操作.网络数据传输. Shuf ...

  5. python进阶之路9文件的处理方法

    内容回顾 字典内置方法 1.类型转换 dict() 2.重要操作 get() d[key] = values 常用 pop() update() 键存在则修改键值对 键不存在则新增键值对 fromke ...

  6. group by 语句怎么优化?

    一.一个简单使用示例 我这里创建一张订单表 CREATE TABLE `order_info` ( `id` int NOT NULL AUTO_INCREMENT COMMENT '主键', `or ...

  7. Java基础学习笔记-流程控制

    Java程序结构 顺序结构 分支选择结构 循环结构 顺序结构 分支选择结构 if-else Switch case Switch case 注意点 要配合break,要不就会一直往下走 case 值必 ...

  8. 本地python环境安装kylin项目依赖时报认证错误信息

    问题描述:项目需要连接kylin数据库查询数据,本地安装kylin项目的依赖环境后报认证错误 python版本3.7 32位 pycharm版本 2022版 成功方法: 更换解释器选择无解释器,创建虚 ...

  9. P13_协同工作_小程序权限管理的概念以及成员管理的两个方面

    协同工作和发布 - 协同工作 了解权限管理需求 在中大型的公司里,人员的分工非常仔细:同一个小程序项目,一般会有不同岗位.不同角色的员工同时参与设计与开发. 此时出于管理需要,我们迫切需要对不同岗位. ...

  10. STM32F1库函数初始化系列:DMA—ADC采集

    1 void ADC_Configure(void) 2 { 3 ADC_InitTypeDef ADC_InitStructure; 4 GPIO_InitTypeDef GPIO_InitStru ...