接下来要做的效果是,在父组件添加两个按钮,点击后改变父组件传过去的值

父组件

 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 点击事件+父子传值的更多相关文章

  1. jQuery添加options点击事件并传值

    说明: 根据选择不同店铺选项,上送不同id值,展示不同商品列表   var formStr = "{'supplierId':'供应链企业|%-jm-sprt-%|93794498-3'}& ...

  2. react 点击事件传值

    test(e){ console.log(e.target) } <button onClick={(e)=>{this.test(e)}}></button> 有时要是 ...

  3. react 点击事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. listview适配器中的控件的点击事件并传值

    @Override public View getView(final int position, View convertView, ViewGroup parent) { // TODO Auto ...

  5. 微信小程序 template添加点击事件

    介绍template是微信小程序提供的模板,可以在模板中定义代码片段,然后在不同的地方调用. 简单使用定义template因为项目中可能会需要到不止一个template,所以最好新建一个文件夹来存放t ...

  6. react native 中webview内的点击事件传到外部原生调用

    先说一下我使用webview的时候遇到的一个功能需求 是这样的,上图中的这个页面是用h5做的,但是由于点击"我的优惠劵"是需要跳转到我原生的页面,也就是说我需要获得这个h5提供的点 ...

  7. 深入React事件系统(React点击空白部分隐藏弹出层;React阻止事件冒泡失效)

    只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...

  8. React 的 DOM 添加多个点击事件

    第一直觉代码如下:后果是写在后面的事件函数覆盖前面的事件函数,只执行第二条(弹出 222). import React, { Component, Fragment } from 'react' ex ...

  9. react native 键盘遮挡按钮点击事件

    在做项目的时候,我遇到一个很奇怪的问题,我先描述一下问题,在InputText输入内完成以后,点击按钮进行下一步的操作的时候,第一次点击的时候,按钮没有响应,第二次点击的时候才会响应.这样对用户体验有 ...

随机推荐

  1. 虚拟机 开发板 PC机 三者之间不能ping通的各种原因分析

    这个问题事实上也相对照较简单.可是非常多网友都给我发消息说 遇到不能ping,每一个人都得回答一次确实显得心有余而力不足.如今我对遇到这几种问题给出最完整的解决方式. (说实话基本上也仅仅要这几种可能 ...

  2. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第9章节--client对象模型和REST APIs概览 介绍SP2013中远程APIs

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第9章节--client对象模型和REST APIs概览  介绍SP2013中远程APIs         当SP首次開始 ...

  3. Swift开发教程--怎样清除模拟器的数据

    打开xcode->preference->location->derived Data,进入文件夹下,删除里面所以后的文件夹就能够了.

  4. ExtJs--06--Ext.WindowGroup相关方法简单使用

    Ext.onReady(function(){ //用windowGroup对象去操作多个window窗体 var winG = new Ext.WindowGroup(); for (var i = ...

  5. ios 得用代理反向传值

    应用场景:有时时候从界面A跳转到界面B,界面B在返回的时候须要将处理的结果传递给A. 实现思路:1,定义一个负责传值的协义,界面A拥有该协义属性,并实现该协义中的方法 2.界面B也拥有该协义属性(代理 ...

  6. ubuntu下一款有点感觉的 linux音乐播放器 clementine(小橘子))

    https://www.clementine-player.org/ 在linux听音乐的感觉确实不是很好,音乐播放器很多.但是仅仅只是数量上的优势,在确实不是很好用.自带的rhythmbox确实很占 ...

  7. Window.open()打开一个窗体不被拦截

    Window.open()打开一个窗体不被拦截     在DataGrid中建一个模板列,在模板列中放一个客户端的Button,或者直接写你要的字句,然后用<a href>连接例:< ...

  8. 利用递归分割(Split)字符串

    利用递归分割(Split)字符串 SqlServer 递归 工作需要将表里的某个字段分割之后再插入到另一个表中,其实数据量不大,直接用游标一行一行的取,再利用循环来分割之后再实现数据的插入应该可以直接 ...

  9. Android对话框与Activity共存时的异常

    异常提示信息 01-01 18:30:38.630: E/WindowManager(14537): Activity com.jack.outstock.activity.ManageCustomA ...

  10. E20170906-mk

    portrait   n. 肖像,肖像画; 模型,标本; 半身雕塑像; 人物描写; orientation  n. 方向,定位,取向,排列方向; 任职培训; (外交等的) 方针[态度]的确定; 环境判 ...