react 点击事件+父子传值
接下来要做的效果是,在父组件添加两个按钮,点击后改变父组件传过去的值
父组件
import React, { Component } from 'react';
import Test from './component/test';
//声明welcome组件
class welcome extends Component {
//声明一个构造函数
constructor(props) {
super(props);
//this.state是定义组件状态,可理解为组件中的数据,好比Vue中的data
this.state = {
userName: '路飞',
userAge: 19
}
}
changUserName(){
//要修改this.state中的值,这是唯一的方法
this.setState({
userName: '路飞:海贼王的男人'
})
}
// react元素 一律写在render函数中
render() {
return (
<div>
{/* 在子组件中声明一个userName属性,将this.state.userName的值传递到子组件中 */}
<Test userName={this.state.userName} userAge={this.state.userAge}></Test>
{/* 声明一个点击事件后面跟着一个bind(this) 是为了解决this指向问题 ,改变this指向 */}
<button onClick={this.changUserName.bind(this)}>改变userName</button>
</div>
);
}
}
//最后一定要记住 向外输出
export default welcome;
子组件
import React, { Component } from 'react'; class test extends Component {
render() {
return (
<div>
<h1>海贼王</h1>
{/* 在子组件中用this.props接收父组件中传递过来的值 */}
{[this.props.userName, this.props.userAge]} {console.log(this.props)}
{/* 通过控制台打印,this.props是传递过来的是一个对象:{userName: "路飞", userAge: 19} */}
</div>
);
}
} export default test;
react 点击事件+父子传值的更多相关文章
- jQuery添加options点击事件并传值
说明: 根据选择不同店铺选项,上送不同id值,展示不同商品列表 var formStr = "{'supplierId':'供应链企业|%-jm-sprt-%|93794498-3'}& ...
- react 点击事件传值
test(e){ console.log(e.target) } <button onClick={(e)=>{this.test(e)}}></button> 有时要是 ...
- react 点击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- listview适配器中的控件的点击事件并传值
@Override public View getView(final int position, View convertView, ViewGroup parent) { // TODO Auto ...
- 微信小程序 template添加点击事件
介绍template是微信小程序提供的模板,可以在模板中定义代码片段,然后在不同的地方调用. 简单使用定义template因为项目中可能会需要到不止一个template,所以最好新建一个文件夹来存放t ...
- react native 中webview内的点击事件传到外部原生调用
先说一下我使用webview的时候遇到的一个功能需求 是这样的,上图中的这个页面是用h5做的,但是由于点击"我的优惠劵"是需要跳转到我原生的页面,也就是说我需要获得这个h5提供的点 ...
- 深入React事件系统(React点击空白部分隐藏弹出层;React阻止事件冒泡失效)
只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...
- React 的 DOM 添加多个点击事件
第一直觉代码如下:后果是写在后面的事件函数覆盖前面的事件函数,只执行第二条(弹出 222). import React, { Component, Fragment } from 'react' ex ...
- react native 键盘遮挡按钮点击事件
在做项目的时候,我遇到一个很奇怪的问题,我先描述一下问题,在InputText输入内完成以后,点击按钮进行下一步的操作的时候,第一次点击的时候,按钮没有响应,第二次点击的时候才会响应.这样对用户体验有 ...
随机推荐
- 如何运行开源的React Native项目?
如何运行开源的RN项目? 1.下载 2.解压 3.配置本地sdk位置 sdk.dir = D\:\\Android\\SDK 4.调整gradle版本 apply plugin: "com. ...
- javascript 将变量值作为对象属性 获取对象对应的值
例子 var var="name"; var objname="obj"; objname=objname+"."+var; alert(e ...
- Java-java-com-util-common-service:CrudService.java
ylbtech-Java-java-com-util-common-service:CrudService.java 1.返回顶部 1. package com.shineyoo.manager.ut ...
- PCB 内网实现《OCR文字识别》实现逻辑
一.实现内网信息获取网络图 二. OCR文字识别,运用技术点(啰嗦了,即然写了就都写了一遍) 三. C#客户端实现界面, 设置界面描述功能待完善,
- mysql出错代码
1005:创建表失败 1006:创建数据库失败 1007:数据库已存在,创建数据库失败 1008:数据库不存在,删除数据库失败 1009:不能删除数据库文件导致删除数据库失败 1010:不能删除数据目 ...
- Redis学习笔记(二):Redis集群
集群通过分片(sharding)来进行数据共享,并提供复制和故障转移功能. 1.节点 一个节点就是一个运行在集群模式下的Redis服务器.启动Redis服务器时,通过判断cluster-enabl ...
- SQLCE本地数据库
SQLCE是一个标准得关系数据库,可以使用 LINQ 和DateContext来处理本地数据库数据库. 使用SQLCE 要在代码中使用本地数据库功能,需要添加以下命名空间 : using System ...
- 前端-Vue学习思维导图笔记
看不清的朋友右键保存或者新窗口打开哦!喜欢我可以关注我,还有更多前端思维导图笔记有vue结构分析,JS基础,JQ,JS高级,Angular,git等等
- 八:前端---Vue下的国际化处理
1:首先安装 Vue-i8n npm install vue-i18n --save 注:-save-dev是指将包信息添加到devDependencies,表示你开发时依赖的包裹. -save是指将 ...
- ajax-工作原理,包含技术,缺陷
1:原理 2:包含技术 3:缺陷