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输入内完成以后,点击按钮进行下一步的操作的时候,第一次点击的时候,按钮没有响应,第二次点击的时候才会响应.这样对用户体验有 ...
随机推荐
- 虚拟机 开发板 PC机 三者之间不能ping通的各种原因分析
这个问题事实上也相对照较简单.可是非常多网友都给我发消息说 遇到不能ping,每一个人都得回答一次确实显得心有余而力不足.如今我对遇到这几种问题给出最完整的解决方式. (说实话基本上也仅仅要这几种可能 ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第9章节--client对象模型和REST APIs概览 介绍SP2013中远程APIs
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第9章节--client对象模型和REST APIs概览 介绍SP2013中远程APIs 当SP首次開始 ...
- Swift开发教程--怎样清除模拟器的数据
打开xcode->preference->location->derived Data,进入文件夹下,删除里面所以后的文件夹就能够了.
- ExtJs--06--Ext.WindowGroup相关方法简单使用
Ext.onReady(function(){ //用windowGroup对象去操作多个window窗体 var winG = new Ext.WindowGroup(); for (var i = ...
- ios 得用代理反向传值
应用场景:有时时候从界面A跳转到界面B,界面B在返回的时候须要将处理的结果传递给A. 实现思路:1,定义一个负责传值的协义,界面A拥有该协义属性,并实现该协义中的方法 2.界面B也拥有该协义属性(代理 ...
- ubuntu下一款有点感觉的 linux音乐播放器 clementine(小橘子))
https://www.clementine-player.org/ 在linux听音乐的感觉确实不是很好,音乐播放器很多.但是仅仅只是数量上的优势,在确实不是很好用.自带的rhythmbox确实很占 ...
- Window.open()打开一个窗体不被拦截
Window.open()打开一个窗体不被拦截 在DataGrid中建一个模板列,在模板列中放一个客户端的Button,或者直接写你要的字句,然后用<a href>连接例:< ...
- 利用递归分割(Split)字符串
利用递归分割(Split)字符串 SqlServer 递归 工作需要将表里的某个字段分割之后再插入到另一个表中,其实数据量不大,直接用游标一行一行的取,再利用循环来分割之后再实现数据的插入应该可以直接 ...
- Android对话框与Activity共存时的异常
异常提示信息 01-01 18:30:38.630: E/WindowManager(14537): Activity com.jack.outstock.activity.ManageCustomA ...
- E20170906-mk
portrait n. 肖像,肖像画; 模型,标本; 半身雕塑像; 人物描写; orientation n. 方向,定位,取向,排列方向; 任职培训; (外交等的) 方针[态度]的确定; 环境判 ...