React之父子组件传值

最新推荐文章于 2023-09-24 09:53:08 发布

Coder_shasha

最新推荐文章于 2023-09-24 09:53:08 发布

阅读量129

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/sinat_41806435/article/details/97136080

版权

React 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

每日一练：
   A
   B
   Main

   基本步骤：
   1、完成组件的创建和使用
   2、将A组件中输入框的值保存在 Main组件
   子与父的通信：
       ①在父组件中定义一个带有参数的方法
       ②将方法传递给子组件
       ③在子组件中调用该方法，同时将需要发送的数据通过参数传递给父组件
   3、在B组件中点击按钮时从Main组件获取值

       属性绑定
       Vue
       <son v-bind:myCT="myContent">
       angular
       <son [myCT]="myContent">

   知识点：
       ①组件的创建和使用
       ②复合组件
       ③props 父子与子父的通信
       ④ref
       ⑤state

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8"></meta>
        <script src="js/react.js"></script>
        <script src="js/react-dom.js"></script>
        <script src="js/browser.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">
            var AComponent = React.createClass({
                //每一次当输入框中的内容发生变化时，将值发送给父组件
                handleChange: function(event){
                    this.props.funcSave(event.target.value);
                },
                render: function(){
                    return <input onChange={this.handleChange} type="text"/>    
                }
            })

            var BComponent = React.createClass({
                handleClick: function(){
                    alert(this.props.myCT);
                },
                render: function(){
                    console.log('B组件在渲染');
                    return <button 
                    onClick={this.handleClick} >clickMe</button>
                }
            })

            var MainComponent = React.createClass({
                getInitialState: function(){
                    return {
                        myContent:''
                    }
                },
                //save方法是由参数的，将save方法传递个子组件去调用
                save: function(myValue){
                    console.log("父组件获取到子组件的值是"+myValue);
                    // this.myContent = myValue;
                    this.setState({
                        myContent:myValue
                    });
                },
                render: function(){
                    console.log('Main组件正在被渲染');
                   
                    return <div>
                        <AComponent 
                        funcSave={this.save}></AComponent>
                        <BComponent 
                        myCT={this.state.myContent}></BComponent>
                    </div>
                }
            })

            ReactDOM.render(
                <MainComponent></MainComponent>,
                document.getElementById('example')
            );
        </script>
    </body>
</html>

Coder_shasha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React之父子组件传值

每日一练： A B Main 基本步骤： 1、完成组件的创建和使用 2、将A组件中输入框的值保存在 Main组件子与父的通信： ①在父组件中定义一个带有参数的方法 ②将方法传递给子组件 ③在子组件中调用该方法，同时将需要发送的数据通过参数传递给父组件 3、在B组件中点击按钮时从...
复制链接

扫一扫