react子组件如何向父组件传值

转载 2016年08月31日 14:14:15

黑色框为父,绿色框为子,红色框为孙子。父向子孙传值用props;子孙向父传值,要在父设置接收函数和state,同时用props将函数名传入子孙。(总的来说就是给子组件传入父组件的方法,在子组件中调用)

复制代码
var Grandson = React.createClass({
    render: function(){
        return (
            <div style={{border: "1px solid red",margin: "10px"}}>{this.props.name}:
                <select onChange={this.props.handleSelect}>
                    <option value="">男</option>
                    <option value="">女</option>
                </select>
            </div>
        )
    }
});
var Child = React.createClass({
    render: function(){
        return (
            <div style={{border: "1px solid green",margin: "10px"}}>
                {this.props.name}:<input onChange={this.props.handleVal}/>
                <Grandson name="性别" handleSelect={this.props.handleSelect}/>
            </div>
        )
    }
});
var Parent = React.createClass({
    getInitialState: function(){
        return {
            username: '',
            sex: ''
        }
    },
    handleVal: function(event){
        this.setState({username: event.target.value});
    },
    handleSelect: function(event) {
        this.setState({sex: event.target.value});
    },
    render: function(){
        return (
            <div style={{border: "1px solid #000",padding: "10px"}}>
                <div>用户姓名:{this.state.username}</div>
                <div>用户性别:{this.state.sex}</div>
                <Child name="姓名" handleVal={this.handleVal} handleSelect={this.handleSelect}/>
            </div>
        )
    }
});
React.render(
  <Parent />,
  document.getElementById('test')
);

相关文章推荐

React 子组件向父组件传值

子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件的state变化。/***实现在输入框输入邮箱时,在div中...

react父子组件传值

引入三个插件 父组件像子组件传值 var Par = React.createClass({ getInitialState:function(){ r...

React组件之间传值

前言 今天群里面有很多都在问关于 React 组件之间是如何通信的问题,之前自己写的时候也遇到过这类问题。下面是我看到的一篇不错英文版的翻译,看过我博客的人都知道,我翻译可能不会按部就班,会尽可...
  • limm33
  • limm33
  • 2016-03-21 10:07
  • 23871

React 的数据流动(反向由子组件向父组件传递数据)

在Rect中,数据都大体上都是单向数据流动的,由父节点传到子节点,子组件都是通过Props从父组件那里获取数据,这样的话,如果很多子组件用了数据只需要改变父组件的数据子组件的数据都会发生改变react...

React Native-5.React Native组件封装,组件传值实例开发

接上一篇,我们来练习一下组件的封装和组件的传值 九宫格例子:老样子,我们又图,没图说个xx 预期效果: 先来看看没有封装组件前的代码'use strict'; var React = requir...

ReactNative(五)——组件封装、样式定义、父子组件通过props传值

组件定义的注意事项对外共享关键字在对外共享的组件一定要在创建类时声明对外共享的关键字:export default使用多种样式在标签上使用多个css样式的时候要用[]给括起来,并且行内样式的优先级大于...

react/react native 组件的刷新机制

组件(Component)的刷新机制一个组件在加载完毕后,如果既没有外部驱动,也没有内部驱动,是不会进行重新渲染的。按照React文档上说的,组件想要对自身进行刷新,可以通过调用setState()或...

react子组件如何向父组件传值

转自:http://blog.csdn.net/qizhiqq/article/details/52384554 黑色框为父,绿色框为子,红色框为孙子。父向子孙传值用props;子孙向父传值...

react父子组件间的交流

本博客主要讲述,react中父组件和子组件之间的交流,其中包括父组件和子组件的值的交流和方法的交流,即父组件如何如何传值给子组件,父组件将方法传给子组件,父组件如何调用子组件的方法。

React组件之间的传值

父组件向子组件传值?传参,props接收 子组件向父组件传值?回调函数 这里重点说一下无关系组件之间的交互 React中没有任何嵌套关系的组件之间如何传值? 方案一:全局广播的方式,即Publ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)