react：子组件改变父组件的状态值，即参数的子传父

大家好，我是梅巴哥er， 本篇介绍子传父的核心原理。

核心思想：

• 所谓的子传父，其实还是父组件要改变自己的状态，只不过是父组件把改变自己状态的携带参数的方法传递给了子组件，让子组件调用这个方法，来改变父组件的状态。

先看效果图：

案例代码：

import React, {
    
     Component } from 'react'


class Child extends Component {
    
    
	// 3，子组件接收并调用改变父组件状态的方法，
	// 并加入改变后的状态值，也就是'red'实参
    handleClick = () => {
    
    
        this.props.app6Change('red')
    }
    render() {
    
    
        return (
            <div>
            	{
    
    /* 4，通过子组件的点击事件，触发改变状态值的方法 */}
                <button onClick={
    
    this.handleClick}>
                    点击改变颜色
                </button>
                {
    
     this.props.children }
            </div>
        )
    }
}
class App6 extends Component {
    
    
    constructor(props) {
    
    
        super(props)
        this.state = {
    
    
            color: 'pink'
        }
    }
    // 1，父组件的改变自己的方法，携带了一个参数c
    app6Change = (c) => {
    
    
        this.setState({
    
    
            color: c
        })
    }
    render() {
    
    
        return (
            <div>
            	{
    
    /* 2，把方法传给子组件 */}
                <Child app6Change={
    
    this.app6Change} >
                    {
    
     this.state.color }
                </Child>
            </div>
        )
    }
}

export default App6