react组建通信之子传父

index.js(入口文件)

import React from 'react';
import ReactDOM from 'react-dom';

// 组件之间的传值
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

“爸爸”App.js

import React, { Component } from 'react';
import Footer from './Footer'

export default class App extends Component {
    //构造方法
    constructor() {
        super()
        this.state = {
            val: '',
            sonValue: ''  //接收子组件的数据
        }
    }
    // 文本框输入事件
    handleInput (e) {
        this.setState({
            val: e.target.value
        })
        console.log(this.state)
    }

    //用于传递给子组件的函数
    sendToSon (val) {//儿子的val
        this.setState({
            sonValue: val
        })
    }

    render () {
        return (
            <div>
                <h2>这是爸爸App.js</h2>
                <div>
                    <input value={this.state.val} onChange={this.handleInput.bind(this)} />
                </div>

                <div>
                    接收儿子的数据：{this.state.sonValue}
                </div>
                <hr />
                {/*把函数通过属性传值的方式传递给子组件  */}
                <Footer text={this.sendToSon.bind(this)} />
            </div>
        )
    }
}
//总结下
//子组件是通过调用父组件传递到子组件的函数(方法) 向父组件传递数据的。
//爸爸把函数传递给儿子 儿子找时机触发 调用函数并传个参数 这个参数来自于子组件 这样就完成了把子的state值传递给父

"儿子"Footer.js

import React, { Component } from 'react';

export default class Header extends Component {
    constructor() {
        super()
        this.state = {
            val: ''
        }
    }
    // 触发父组件传递过来的参数
    handleClick () {
        this.props.text(this.state.val)
        // 从props中获取到这个函数  text
    }
    render () {
        return (
            <div>
                <h2>这是儿子Footer.js</h2>
                <div>
                    <input value={this.state.val} onChange={(e) => {
                        this.setState({ val: e.target.value })
                    }} />
                    {/* 箭头函数的this指向父作用域，或者用bind修改this指向也可*/}

                    <button onClick={this.handleClick.bind(this)}>触发</button>
                </div>
            </div>
        )
    }
}