react子组件传父

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
   <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
   <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app"></div>


    <script type="text/babel">



       class Demo extends React.Component{
           constructor(props){
               super(props)
               this.state={
                   type:"text",
                   str:"hehe",
                   arr:[0,1,2,3,4],
                   obj:{name:'888',age:'666'},
                   aaa:"",
                   bbb:""

               }
           } 



           tap3(){
               this.setState({aaa:this.refs.chuan.value})
               //console.log(this.refs.chuan.value)
           }

            render(){
                var that = this
                return(
                    <div>
                        <h1>付组件</h1>
                       <p>接收值：{this.state.bbb}</p>
                       
                        <hr/>
                        <Demo2 data={function(msg){
                          that.setState({bbb:msg})
                        }}/>
                    </div>
                )
            }



       }

//子组件
      

       class Demo2 extends React.Component{
        //console.log(this.props)

           constructor(props){
               super(props)

           }

           tap(){
             this.props.data(this.refs.zhi.value)
           }


           render(){
               return(
                   <div>
                     <h1>子组卷</h1>
                     <input type="text" ref="zhi"/>
                     <button onClick={this.tap.bind(this)}>传给fu</button>
                   </div>
               )
           }

       }

      


     ReactDOM.render(<Demo/>,document.getElementById("app"))
     
    </script>

</body>
</html>
猜你喜欢
