一,组件

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. 神奇的DEBUG:因为异常导致MongoDB容器无法启动

    越来越多的项目使用docker进行环境搭建,统一了开发和运行环境,好处颇多.但同时也引入了许多复杂性,比如一些容器服务突然无法启动,那么debug起来就比物理机安装的服务麻烦一些. 这段时间Mac P ...

  2. JUC并发编程详解(通俗易懂)

    一.JUC简介 在Java5.0提供了java.util.concurrent包,简称JUC,即Java并发编程工具包.JUC更好的支持高并发任务. 具体的有以下三个包: java.util.conc ...

  3. Js生成图片验证码

    上代码 /** * [使用说明] * 1.生成验证码 * 函数: * generateRandomCode( dom对象Id ); * 例: * generateRandomCode( 'id' ); ...

  4. Lombok中@Builder和@SuperBuilder注解的用法

    @Builder 是 lombok 中的注解.可以使用builder()构造的Person.PersonBuilder对象进行链式调用,给所有属性依次赋值. Person person1 = Pers ...

  5. python进阶之路6之 for循环方法

    while循环补充说明 1.死循环 真正的死循环是一旦执行 CPU功耗会极速上升 直到系统采取紧急措施 尽量不要让CPU长时间不间断运算 2.嵌套及全局标志位 强调:一个break只能结束它所在的那一 ...

  6. [Untiy]贪吃蛇大作战(四)——游戏主界面

    游戏主界面: 由于这个场景比较复杂,需要分几个部分实现: 1.游戏背景 首先我们的游戏场景上包括了一个大的背景图片,之外再包围一个红色的区域.中间的区域才是可活动的区域,周围通过碰撞检测盒来检测是否有 ...

  7. 一文读懂Go Http Server原理

    hello大家好呀,我是小楼,这是系列文<Go底层原理剖析>的第二篇,依旧是分析 Http 模块,话不多说,开始. 从一个 Demo 入手 俗话说万事开头难,但用 Go 实现一个 Http ...

  8. day10-AOP-03

    AOP-03 7.AOP-切入表达式 7.1切入表达式的具体使用 1.切入表达式的作用: 通过表达式的方式定义一个或多个具体的连接点. 2.语法细节: (1)切入表达式的语法格式: execution ...

  9. VMware vSphere vCenter ServerAppliance 7.0安装配置

    VMware vSphere vCenter ServerAppliance 7.0安装配置 环境说明: 1.将vCenter ServerAppliance部署在ESXi主机上,安装配置好ESXi主 ...

  10. 重学c#系列—— IO流[三十四]

    前言 简单介绍一下io流. 以前写过两篇,里面是java 语言写的,简单介绍了一下io流,这里是对io流的整理. https://www.cnblogs.com/aoximin/p/12007925. ...