精华内容
参与话题
问答
  • 本文介绍了React 子组件向父组件传值的方法,分享给大家 子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件的state变化。 /***实现在...
  • React子组件和父组件通信 React子组件和父组件通信包括以下几个方面: 1、子组件获取父组件属性:props或者state 2、子组件调用父组件的方法 3、父组件获取子组件的属性:props或者state 4、父组件调用子组件的方法 ...

    React子组件和父组件通信

    React子组件和父组件通信包括以下几个方面:

    1、子组件获取父组件属性:props或者state
    2、子组件调用父组件的方法
    3、父组件获取子组件的属性:props或者state
    4、父组件调用子组件的方法
    我们从下面这个例子来详细了解:

    父组件:
     1 var Father=React.createClass({
     2     getDefaultProps:function(){
     3         return {
     4             name:"父组件"
     5         }
     6     },
     7     MakeMoney:function(){ // 挣钱,供子组件调用
     8         alert("我在挣钱!");
     9     },
    10     CheckStudy:function(){ // 学习,调用子组件方法
    11         this.refs["child"].Study();
    12     },
    13     getChildName:function(){ // 调用子组件方法获取孩子名字
    14         alert(this.refs["child"].getName());
    15     },
    16     render:function(){
    17         
    18         return <div>
    19                     <button onClick={this.CheckStudy}>监控孩子学习</button>
    20                     <button onClick={this.getChildName}>获取孩子名字</button>
    21                     <br/>
    22                     子组件
    23                     <Child ref="child" fatherName={this.props.name} MakeMoney={this.MakeMoney}></Child>
    24                 </div>;
    25     }
    26 });
    
    子组件:
     1 var Child=React.createClass({
     2     getDefaultProps:function(){
     3         return {
     4             name:"子组件"
     5         }
     6     },
     7     StudyMakeMoney:function(){ // 学习挣钱,调用父组件方法
     8         this.props.MakeMoney();
     9     },
    10     Study:function(){ // 学习,调用子组件方法
    11         alert("我在学习!");
    12     },
    13     getName:function(){// 供父组件调用,返回名字
    14         return this.props.name;
    15     },
    16     render:function(){
    17         
    18         return <div>父组件名字:{this.props.fatherName}<button onClick={this.StudyMakeMoney}>孩子学习挣钱</button></div>;
    19     }
    20 });
    

    对应的

    1、子组件Child通过父组件传入的name,获取父组件的props
    2、子组件Child通过父组件传入的MakeMoney方法调用父组件方法
    3、父组件Father,通过ref调用子组件的getName方法,获取props
    4、父组件Father,通过ref调用子组件的Study方法

    展开全文
  • 本文介绍了React 子组件向父组件传值的方法,分享给大家子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件的state变化。/***实现在输入框...

    本文介绍了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变化,达到在父组件中展示子组件产生的变化。

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

    展开全文
  • react 子组件向父组件传值 react的传值与vue的方式一样。 父组件向子组件传值,通过属性传递,子组件直接通过props接收。 子组件向父组件传值:子组件调用父组件传递过来方法。方法在父组件中创建,子组件调用。 父...

    react 子组件向父组件传值

    react的传值与vue的方式一样。
    父组件向子组件传值,通过属性传递,子组件直接通过props接收。

    子组件向父组件传值:子组件调用父组件传递过来方法。方法在父组件中创建,子组件调用。

    父组件:父组件向子组件传递handleDelete方法,此方法的操作也在父组件。
    在这里插入图片描述

    子组件:子组件调用父组件传递过来的handleDelete方法,子组件中再定义此方法,在方法中定义要传给父组件的数据。
    在这里插入图片描述

    总结:不管是子传父,还是父传子都是通过props属性来传递。

    展开全文
  • 在使用模块化开发,经常会遇到组件之间的传值问题,这篇说一下react子组件如何向父组件传值,父组件如何获取子组件的数据和方法 父组件: import React, { Component } from 'react'; import Header from './Header....

    在使用模块化开发,经常会遇到组件之间的传值问题,这篇说一下react子组件如何向父组件传值,父组件如何获取子组件的数据和方法

    父组件:

    import React, { Component } from 'react';
    import Header from './Header.js'		//引入子组件
    
    class Home extends Component{
    	constructor(props){
    		super(props)
    		this.state={
    			title:'首页'
    		}
    	}
    	getChildData=(res)=>{
    		alert(res)
    		this.setState({
    				msg:res
    		})
    	}
    	render(){
    		return(
    			<div>
    				<Header  news={this}/>		//这里给子组件定义一个news属性为this
    			</div>
    		) 
    	}
    }
    export default Home
    

    子组件添加一个按钮定义一个onClick事件this.props.news.getChildData就可以调用父组件的方法并使用bind绑定this和传递参数

    <button onClick={this.props.news.getChildData.bind(this,'我是子组件的数据')}>子组件给父组件传值</button>
    

    这里父组件中的getChildData方法就可以通过形参接收参数。

    父组件主动获取子组件的数据及方法
    1.调用子组件的时候指定一个ref值
    2.通过this.refs.header 获取整个子组件实例 (注意要在dom加载完成之后获取)

    ref的使用我这篇文章中有写,这里不再说明,传送门!

    展开全文
  • react 子组件更新父组件状态

    千次阅读 2019-03-07 13:43:22
    转自:https://blog.csdn.net/yesyoucan_/article/details/82531779 react 子组件更新父组件状态 class Father extends Component { construtor(props){ super...
  • react 子组件更新父组件状态 技术相对简单 照猫画虎即可 class Father extends Component { construtor(props){ super(props); this.state = { name: 'Jnne', } } onChangeState(stateN...
  • 本博客代码是 React 父组件和子组件相互传值的 demo;实现封装一个折线图,折线图选择下拉框,获取下拉框点击的值并且传给父组件根据下拉框筛选的条件更新视图;效果图如下: 父组件代码: 代码解析:父组件 ...
  • React子组件修改父组件的状态

    万次阅读 2016-10-18 12:46:35
    React子组件修改父组件的状态
  • react组件切换 react子组件切换

    千次阅读 2019-09-26 16:55:50
    react组件切换
  • React子组件怎么改变父组件的state 1.父组件 class Father extends React.Component { construtor(props){ ...
  • react 子组件componentDidMount只执行一遍的解决方法 用key值:
  • react强制组件刷新Note: As of React 16, componentWillReceiveProps() is deprecated, meaning if you are using that version or higher in your project, this is not good advice for you. 注意:从React 16开始...
  • React子组件向父组件传值

    万次阅读 2017-07-23 17:10:06
    子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件的state变化。/***实现在输入框输入邮箱时,在div中即时显示输入内容***/ ...
  • react 子组件引入父组件加不上类名                   function inject_unount (target) {   // 改装componentWillUnmount,销毁的时候记录一下 let next = target.prototype....
  • React中,子组件向父组件通信,也需要父组件向子组件传递props,只是父组件传递的,是作用域为父组件自身的函数,子组件调用该函数,将子组件想要传递的信息,作为参数,传递到父组件的作用域中。 父组件: 子组件...
  • 父组件向子组件传值,是直接用props,但有时需要数据交护,1.此时子组件怎么向父组件传值呢,2.还有就是兄弟组件之间的传值呢还望指教,提供一个清晰点的思路,先在这里谢谢了:父组件props进去或者redux实在不行你...
  • react中子组件向父组件传参,可以先在父组件申明一个带有形参的函数方法,父组件自己不调用,然后通过子组件调用父组件的方法时传递实参的方式将参数传递给父组件,代码示例如下: class Parent extends React....
  • React 子组件传父组件

    2020-05-07 12:33:31
    父组件将 handler 方法名 通过 props 传给 子组件子组件调用 handler 方法并传入参数; 父组件实现 handler 方法并使用参数;
  • react 子组件渲染

    2020-02-22 01:08:32
    react接受新的props子组件渲染 或者直接使用 this.props; 或者将数据保存到 state,使用 componentWillReceiveProps 函数调用 this.setState 重新渲染
  • React 子组件封装

    2019-03-26 23:52:01
    子组件: // 封装input输入框 import React from 'react' import classnames from 'classnames' // 定义返回的数据类型 import PropTypes from 'prop-types' const TextAreaFieldGroup = ({...
  • 但是没办法,还是硬着头皮上了,后面会写一篇文章,记录我是如果花一个星期从对react一无所知,到能够修改bug,并且开发新功能,这篇主要记录一下子组件如何传值给父组件。 使用场景 新功能开发中有一个场景需要...
  • react子组件给父组件传值

    千次阅读 2019-04-25 18:51:52
    子组件给父组件传值: 子组件的代码: render() { return ( <div> {/*当input的值改变时将子组件的值传给父组件,toFatherValue是父组件一个属性,用来接口子组件的值*/} <input onChange={(e) => ...

空空如也

1 2 3 4 5 ... 20
收藏数 3,960
精华内容 1,584
关键字:

react子组件