react父子组件通讯----->下面用到的ref属性调用子组件的方法，可以实现子组件往父组件传递参数，可以通过在父组件的方法中调用子组件的方法，通过返回值来拿到值，也可以在子组件中，对数据处理完后，调用父组件传给子组件的参数或者方法，来实现传参，

<scripttype="text/babel">

var Child =React.createClass({

getInitialState: function() {

return {color:"",childMsg:"我是子组件的信息"};

},

changeColor: function(e) {

this.setState({color:e.target.getAttribute("data-color")});

alert(this.state.color);

return this.state.childMsg;

},

toParentMsg:function(){

},

render: function() {

return (

<div style={{backgroundColor: this.state.color}}className="child">

<br/>

<ul className="list-inline">

<li><ahref="#" data-color="#286090" className="btn btn-primary" onClick={this.props.parentChangeColor}>{this.props.parentMsg}</a></li>

<li><ahref="#" data-color="#31b0d5" className="btn btn-info" onClick={this.props.parentChangeColor}>{this.props.parentMsg}</a></li>

<li><ahref="#" data-color="#c9302c" className="btn btn-danger" onClick={this.props.parentChangeColor}>{this.props.parentMsg}</a></li>

<li><ahref="#" data-color="#ec971f" className="btn btn-warning" onClick={this.props.parentChangeColor}>{this.props.parentMsg}</a></li>

<li><ahref="#" data-color="#e6e6e6" className="btn btn-default" onClick={this.props.parentChangeColor}>{this.props.parentMsg}</a></li>

</ul>

</div>

);

}

});

var Child3 =React.createClass({

getInitialState: function() {

return {color:"",childMsg:"我是子组件的信息"};

},

changeColor: function(e) {

this.setState({color:e.target.getAttribute("data-color")});

alert(this.state.color);

return this.state.childMsg;

},

toParentMsg:function(e){

var msg =e.target.getAttribute("data-color");

this.props.parentChangeColor(msg);

},

render: function() {

return (

<div style={{backgroundColor: this.state.color}}className="child">

<br/>

<ul className="list-inline">

<li><ahref="#" data-color="#286090" className="" onClick={this.toParentMsg}>{this.props.parentMsg}</a></li>

<li><ahref="#" data-color="#31b0d5" className="" onClick={this.toParentMsg}>{this.props.parentMsg}</a></li>

<li><ahref="#" data-color="#c9302c" className="" onClick={this.toParentMsg}>{this.props.parentMsg}</a></li>

<li><ahref="#" data-color="#ec971f" className="" onClick={this.toParentMsg}>{this.props.parentMsg}</a></li>

<li><ahref="#" data-color="#e6e6e6" className="" onClick={this.toParentMsg}>{this.props.parentMsg}</a></li>

</ul>

</div>

);

}

});

var Parent =React.createClass({

getInitialState: function() {

return {color:"",msg1:"hello1 ref1",msg2:"hello1 ref2",msg3:"hello child3"};

},

changeColor: function(e) {

alert("data from child")

this.setState({color:e.target.getAttribute("data-color")});

},

child1ChangeColor: function(e) {

this.refs["child1"].changeColor(e);

},

child2ChangeColor: function(e) {

this.refs["child2"].changeColor(e);

},

getChild3Msg:function(msg){

alert("我是来自child3的颜色："+msg)

},

render: function() {

return (

<div style={{backgroundColor: this.state.color}}className="parent">

<br/>

<ul className="list-inline">

<li>对应第一个child</li>

<li><ahref="#" data-color="#286090" className="" onClick={this.child1ChangeColor}>ref[child1]</a></li>

<li><ahref="#" data-color="#31b0d5" className="" onClick={this.child1ChangeColor}>ref[child1]</a></li>

<li><ahref="#" data-color="#c9302c" className="" onClick={this.child1ChangeColor}>ref[child1]</a></li>

<li><ahref="#" data-color="#ec971f" className="" onClick={this.child1ChangeColor}>ref[child1]</a></li>

<li><ahref="#" data-color="#e6e6e6" className="" onClick={this.child1ChangeColor}>ref[child1]</a></li>

</ul>

<ul className="list-inline">

<li>对应第二个child</li>

<li><ahref="#" data-color="#286090" className="" onClick={this.child2ChangeColor}>ref[child2]</a></li>

<li><ahref="#" data-color="#31b0d5" className="" onClick={this.child2ChangeColor}>ref[child2]</a></li>

<li><ahref="#" data-color="#c9302c" className="" onClick={this.child2ChangeColor}>ref[child2]</a></li>

<li><ahref="#" data-color="#ec971f" className="" onClick={this.child2ChangeColor}>ref[child2]</a></li>

<li><ahref="#" data-color="#e6e6e6" className="" onClick={this.child2ChangeColor}>ref[child2]</a></li>

</ul>

<hr/>

<Childref="child1"parentChangeColor={this.changeColor}parentMsg={this.state.msg1}/>

<Childref="child2"parentChangeColor={this.changeColor}parentMsg={this.state.msg2}/>

<Child3parentChangeColor={this.getChild3Msg}parentMsg={this.state.msg3}/>

</div>

);

}

});

ReactDOM.render(

<Parent/>,

document.getElementById(‘well‘)

);

</script>

时间： 2024-10-08 08:25:53

react父子组件通讯----->下面用到的ref属性调用子组件的方法，可以实现子组件往父组件传递参数，可以通过在父组件的方法中调用子组件的方法，通过返回值来拿到值，也可以在子组件中，对数据处理完后，调用父组件传给子组件的参数或者方法，来实现传参，的相关文章

React（7） --react父子组件传参

react父子组件传参 父级向子级传参:在父组件中,我们引入子组件,通过给子组件添加属性,来起到传参的作用,子组件可以通过props获取父组件传过来的参数. 在父组件中: import React from 'react' import ChildCom from './childCom.js' class ParentCom extends React.Component { render() { return ( <div> <h1>父组件</h1> <Chi

小程序的组件通讯三种方法==子向父传值

小程序的组件通讯三种方法 ============================ ================================ 子向父传值 第一步:小程序子向父传值在父组件定义方法 第二步:小程序子向父传值第二部在使用子组件的标签上在父的wxml文件中把方法传递给子组件 第三步:小程序子向父传值第三步在子组件的js文件中调用this·triggerEvent触发方法同时传递参数给父组件 第四步:第四步在第一步定义好的方法内部通过e·detail来接收子组件传递回来的参数 原

[ jquery 方法 index(selector | element) ] 此方法返回相应元素的索引值

搜索匹配的元素,并返回相应元素的索引值,从0开始计数,如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置:  如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <

Python 字典(Dictionary) items()方法-以列表返回可遍历的(键, 值) 元组数组

描述 Python 字典(Dictionary) items() 函数以列表返回可遍历的(键, 值) 元组数组. 语法 items()方法语法: dict.items() 参数 NA. 返回值 返回可遍历的(键, 值) 元组数组. 实例 以下实例展示了 items()函数的使用方法: #!/usr/bin/python dict = {'Name': 'Zara', 'Age': 7} print "Value : %s" % dict.items() 以上实例输出结果为: Value

数据库插入数据返回当前主键ID值方法

环境:SQL Anywhere 9.0.2 创建语句: create table test(    id int primary key identity(1,1),    name varchar(20)) 当我们插入一条数据的时候,我们很多时候都想立刻获取当前插入的主键值返回以做它用.我们通常的做法有如下几种: 1. 先 select max(id) +1 ,然后将+1后的值作为主键插入数据库: 2. 使用特定数据库的 auto_increment 特性,在插入数据完成后,使用 select

Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点:1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)和

vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this.$emit("父组件上的方法名",a)     /-------a------/代表需要传递的参数        兄弟组件通讯   需要创建一个公共的vue 实例, new vue()    在main.js里 书写Vue.prototype .com=new vue()    通过pr

easyui的combobox下拉框初始化默认值以及保持该值一直显示的方法

easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库"字段,并且在下拉的时候,"全部数据库"一直排在最顶部. 初始化效果如下: 下拉之后的效果如下: 实现方式: easyui的combobox有一个loader属性,easyui的API对loader属性说明如下: easyui的combobox有一个onLoadSuccess事件,eas

ASP.NET 使用js插件出现上传较大文件失败的解决方法（ajaxfileupload.js第一弹）

在写这篇的时候本来想把标题直接写成报错的提示,如下: "SecurityError:Blocked a frame with origin "http://localhost:55080" from accessing a cross-origin frame." 但是有点长,会显示不全,就想还是换一下吧,想了一下 "ASP.NET 上传过大图片或文件报错解决办法", 然后当我写完这个题目之后,我觉得这篇文章好像根本没有写的必要,估计看完题目就会