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中...
  • haoaiqian
  • haoaiqian
  • 2017年07月23日 17:10
  • 3219

React组件之间传值

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

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

黑色框为父,绿色框为子,红色框为孙子。父向子孙传值用props;子孙向父传值,要在父设置接收函数和state,同时用props将函数名传入子孙。(总的来说就是给子组件传入父组件的方法,在子组件中调用)...
  • qizhiqq
  • qizhiqq
  • 2016年08月31日 14:14
  • 9957

react父子组件间的交流

本博客主要讲述,react中父组件和子组件之间的交流,其中包括父组件和子组件的值的交流和方法的交流,即父组件如何如何传值给子组件,父组件将方法传给子组件,父组件如何调用子组件的方法。...
  • genius_yym
  • genius_yym
  • 2017年06月11日 18:05
  • 2732

react 父子组件之间的通信和函数调用

【react】父组件向子组件传值 父向子是用props,然后再子那边有一个监听函数 componentWillReceiveProps:function(nextProps){ ...
  • masterShaw
  • masterShaw
  • 2016年10月28日 17:22
  • 6432

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

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

react父子组件传值

引入三个插件 父组件像子组件传值 var Par = React.createClass({ getInitialState:function(){ r...
  • yaya1286249672
  • yaya1286249672
  • 2017年03月25日 11:30
  • 1708

react组件之间的传值

原著序 处理 React 组件之间的交流方式,主要取决于组件之间的关系,然而这些关系的约定人就是你。 我不会讲太多关于 data-stores、data-adapters 或者 data-...
  • Jesse_Suo
  • Jesse_Suo
  • 2017年03月13日 22:02
  • 1835

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

转自:http://blog.csdn.net/qizhiqq/article/details/52384554 黑色框为父,绿色框为子,红色框为孙子。父向子孙传值用props;子孙向父传值...
  • xiaoguang44
  • xiaoguang44
  • 2017年04月11日 00:43
  • 1528

React组件间信息传递方式

React组件间信息传递方式
  • guangyao88
  • guangyao88
  • 2017年05月12日 11:55
  • 3960
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react子组件如何向父组件传值
举报原因:
原因补充:

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