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组件之间传值

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

react父子组件传值

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

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

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

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

【react】父组件向子组件传值 父向子是用props,然后再子那边有一个监听函数 componentWillReceiveProps:function(nextProps){ ...

react父子组件间的交流

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

react native 子控件传递数据给父控件

/** * Created by fanxiaole on 17/3/24. * 需求 在子控件(select)中选择性别 在父控件(form)中获取这个值并提交 * */ //步骤 ...

React组件之间的传值

父组件向子组件传值?传参,props接收 子组件向父组件传值?回调函数 这里重点说一下无关系组件之间的交互 React中没有任何嵌套关系的组件之间如何传值? 方案一:全局广播的方式,即Publ...

react组件之间的传值

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

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

转自:http://blog.csdn.net/qizhiqq/article/details/52384554 黑色框为父,绿色框为子,红色框为孙子。父向子孙传值用props;子孙向父传值...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react子组件如何向父组件传值
举报原因:
原因补充:

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