react 子传参父_React 子组件向父组件传值的方法

本文介绍了React 子组件向父组件传值的方法，分享给大家

子组件需要控制自己的 state，然后告诉父组件自己的state，通过props调用父组件中用来控制state的函数，在父组件中展示子组件的state变化。

/***实现在输入框输入邮箱时，在div中即时显示输入内容***/

//子组件

var Child = React.createClass({

render: function(){

return (

邮箱：

)

}

});

//父组件

var Parent = React.createClass({

getInitialState: function(){

return {

email: ''

}

handleEmail: function(event){

this.setState({email: event.target.value});

render: function(){

return (

邮箱：{this.state.email}

)

}

});

React.render(

document.getElementById('test')

);

原理：

依赖 props 来传递事件的引用，并通过回调的方式来实现的，这样实现不是特别好，但在没有任何工具的情况下是一种简单的实现方式。

分析：

React中当state发生改变时，组件才会update。在父组件中设定state的初始值以及处理该state的函数，同时将函数名通过以props属性值的形式传入子组件，子组件通过调用父组件的函数，进而引起state变化，达到在父组件中展示子组件产生的变化。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

时间： 2017-07-22

react 子传参父_React 子组件向父组件传值的方法相关推荐

react路由传参的几种方式
第一种传参方式,动态路由传参 <Link to='/home/dx'>首页</Link><Route path="/home/:name" compo ...
react路由传参问题
之前在工作中开发一个react项目的时候遇到路由传参的问题,当时因为基础不好,解决这个问题用了好久,还产生了一个bug,特此记录一下. 项目中路由跳转使用的是hashRouter,由于是详情页面跳到审 ...
react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
react 子传参父_react子父传参有几种方法？
react子父传参有几种方法?下面本篇文章给大家介绍一下react父子组件传参(值)的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. react父子组件传参(值)的几种方法一 ...
vue2.0父向子传参，子向父传参，路由传参
父向子传值: //父组件 <selectionGroup v-for="item in tab" :item="item"></selecti ...
vue3 父子/子传参
1.使用props,emit传参 // 父组件 <template>{{arr}}<test :arr="arr" @emitest="emitSon& ...
vue 如何将参数放到连接上_通过Vue路由传参的两种方式及Vue组件中接收参数的方式...
1. Vue传参方式 1.1 通过动态路由传参我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那 ...
vue 分享微信传参_vue实现微信分享链接添加动态参数的方法
微信分享时分享链接携带参数可能不是固定的需要在分享的前一刻才知道这里就是动态设置分享链接的基本写法代码不是那么详尽但大致流程如下 1.安装引用jssdk npm install --save ...
jquery 乱码传参_jquery ajax传递中文参数乱码问题及解决方法说明
jQuery传递中文参数乱码,原因是默认的传递方式没有采用UTF-8,所有我们可以在传递参数的时候对参数进行编码,然后再操作,代码如下,红色的代码为传递的参数,已标注 smsubmitclick = ...

react 子传参父_React 子组件向父组件传值的方法

react 子传参父_React 子组件向父组件传值的方法相关推荐

最新文章

热门文章