react组件传值（子传父）

最新推荐文章于 2025-11-04 17:14:31 发布

原创最新推荐文章于 2025-11-04 17:14:31 发布 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react 组件传值

前端开发同时被 2 个专栏收录

18 篇文章

订阅专栏

前端框架

10 篇文章

订阅专栏

本文介绍了一个React应用中如何实现父子组件之间的数据通信。具体来说，父组件通过传递一个更新自身状态的方法给子组件，子组件则通过调用该方法来更新父组件的状态，从而实现了从子到父的数据传递。


<div id="out"></div>

<script type="text/babel">
// 子传父   父组件获取子组件数据
//父组件传递一个可以改变自己状态的方法给子组件，子组件通过调用父组件传过来的方法来改变父组件的数据。
var Father = React.createClass({
        getInitialState:function(){
            return{
                res:""
            }
        },
        setVal:function(val){ //1.父组件定义一个改变自己状态的方法(setVal)，获取子组件传递值之后重新赋值
        this.setState({
        res:val
        })
        },
        render:function(){//2.通过属性（value）传给子组件
            return(
                <div>
                    <h1>父组件</h1>
                    父组件获取子组件值-->{this.state.res}
                    <hr/>
                    <Child value={this.setVal}/>    
                  
                </div>
            )
        }
    });


    var Child = React.createClass({
        childChange:function(){   //3.子组件定义改变数据的方法，
            var str = this.refs.inputVal.value; 
            this.props.value(str); //4.把改变的数据传递给父组件，
        },
        render:function(){
            return(
                <div>
                    <h1>子组件</h1>
                    <input type = "text" ref = "inputVal" onChange = {this.childChange} />
                </div>
            )
        }
    });
    ReactDOM.render(<Father/>,document.getElementById("out"));
</script>