react的子传父

最新推荐文章于 2024-05-21 20:20:00 发布

hardwork come on

最新推荐文章于 2024-05-21 20:20:00 发布

阅读量200

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/weixin_43353869/article/details/114857796

版权

react 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='box'></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script><!--react的核心库-->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script><!--提供操作dom的扩展库-->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!--解析jsx语法代码为纯js语法代码的库-->
    <script type="text/babel">
     /*
        子传父(函数传进去给到子元素,子元素通过调用父元素的函数,使得修改父元素得数据)
        调用父元素的函数,从而修改父元素的数据,从而实现数据从子元素传至父元素
    */ 
    class Father extends React.Component{
        constructor(){
            super()
            this.state = {
                name: 'lsh'
            }
        }
        render(){
            return (
                      <div>
                            <h1>{this.state.name}</h1>
                            {/* <Son setChildData={this.setChildData}/>*/}
                            
                            <Son setFun={this.setChildData}/>
                      </div>
                   )
        }
        // 设置函数修改状态,该函数可以修改子元素的数据,这个函数传递给子元素
        setChildData=(data)=>{
            this.setState({name:data})
        }
     }
     class Son extends React.Component{
        constructor(props){
            super(props)
            this.state = {
                msg: 'react',
                msg1: 'reactVue'
            }
        }
        render(){
            return(
                <div>
                    {/*点击button将子元素的内容传给父元素*/}
                    {/*<button onClick={this.setData}>传递helloworld给父元素</button>*/}
                    <button onClick={this.setData}>传递helloworld给父元素</button>
                    {/*调用props是父元素的函数,this.props.setFun这种不好传参数  */}
                    <button onClick={()=>{this.props.setFun('直接调用props的函数')}}>传递helloworld给父元素</button>
                    <button onClick={()=>{this.props.setFun(this.state.msg1)}}>传递helloworld给父元素</button>
                </div>
            )
        }
        // 方法写在函数外面,setData发送数据,拿到this.state这个数据
        // this.setData = this.setData.bind(this)
        setData=()=>{
            // {...this.state,name:'ls'} 将原有的对象进行展开,并且将原来的对象进行合并
            // 获取当前的方法  this.props 指的是当前传递的数据或者方法
            // console.log(this.props, this.props.setFun, 'this.props')
            // 将子元素传递给父元素,实际就是调用父元素传递进来的父元素函数
            this.props.setFun(this.state.msg)
        }
     }
     ReactDOM.render(
         <Father/>,
         // document.querySelector('#box') 是选中元素
         document.getElementById('box')
     )
    </script>
</body>
</html>