react 子组件给父组件传值 父组件获取子组件中更新的值

1.0 父组件获取子组件中的值

• parent.js

// import logo from './logo.svg';
import React, {Component} from 'react'
import Children  from './children'
export default class Parent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '我是父组件',
            msg: '父组件传值给子组件',
            childrenMsg:'',
            newName:'我是父组件中的newName',
            newMsg :'父组件传值给子组件中newMsg'
              }
        this.child = React.createRef(); //父组件获取子组件更新的值
    }
    getChildrenMsg=()=>{/**父组件获取子组件中的值 */
        this.setState({childrenMsg:this.child.current.state.msg })
      }
    getChildrenMsg2 = (result,msg)=>{/**子组件触发的方法 获取子组件传递的值 */
        console.log(result)
        this.setState({
            childrenMsg:msg
        })
    }

    render() {
        return (
            

                
{ this.state.name }
                获取更新子组件的msg值
                
我要引入子组件了
                
子组件传来的值为：{ this.state.childrenMsg }
                

                
            
        )
    }
}

• children.js

import React, {Component} from 'react'
export default class Children extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '我是子组件',
            msg: '子组件传值给父组件'
        }
      
    }
    toParent=()=>{
        this.props.parent.getChildrenMsg2(this,this.state.msg);//子组件定义的方法抛出的方法名 用于父组件通过相同的事件名获取自组件传递的值
    }

    render() {/**this.props获取父组件中所有的值*/
        return (
            

                
{ this.state.name }
                
我是子组件中msg的值{this.state.msg}
                子组件传值给父组件
                
{this.props.newName}
                
我是子组件中拿到父组件传递过来的newMsg:{this.props.newMsg}
            
        )
    }
}

• app.js

import React from 'react';
import Parent from './parent'
function App() {
  return (
      

          
      
  );
}
export default App;

显示

image.png