react的组件通信

react的组件通信

1、父组件传子组件

import React, {Component} from 'react'
class Father extends Component{
    render() {
        return (
            <div>
                <Child msg="我是父组件中的数据：father-data"/>
            </div>
        )
    }
}
class Child extends Component{
    constructor(props) {
        super(props)
        this.state = {
            message: props.msg
        }
    }
    render() {
        return (
            <div>
                <div>父组件传过来的数据是：{this.state.message}</div>
            </div>
        )
    }
}
export default Father

父组件在调用的子组件上定义一个属性msg，属性的值就是需要传递的数据。在子组件中，通过props.msg获取数据。

2、子组件传父组件

import React, { Component } from 'react'
class Child extends Component {
    constructor(props) {
        super(props)
    }
    input = (e) => {
        console.log(e.target.value);
        if (e.keyCode == 13) {
            this.props.send(e.target.value)
        }
    }
    render() {
        return (
            <div>
                <input type="text" placeholder='please input' onKeyUp={this.input} />
            </div>
        )
    }
}
class Father extends Component {
    state = {
        inputVal: "123"
    }
    getData = (val) => {
        this.setState({
            inputVal: val
        })
    }
    render() {
        return (
            <div>
                <Child send={this.getData} />
                子元素传过来的值：{this.state.inputVal}
            </div>
        )
    }
}
export default Father

子组件传父组件是通过在子组件中使用props调用父组件中定义的方法(函数)并将自己的数据传递过去。

如上所示，父组件在调用的子组件上定义了send方法用于获取子组件传过来的数据，子组件中调用父组件中的send方法将input的值传过去。

注意：若定义的函数不是箭头函数，则需要在调用的地方使用bind绑定当前this。如this.getdata.bind(this)

3、兄弟组件通信

import React, {Component} from 'react'
class A extends Component{
    state = {
        inputVal: "module A default value"
    }
    handleChange = (e) => {
        this.setState ({
            inputVal: e.target.value
        })
    }
    sendData = () = {
        const { sendFn } = this.props
        sendFn(this.state.inputVal)
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.inputVal} onChange={this.handleChange}/>
                <button onClick={this.sendData}>send</button>
            </div>
        )
    }
}
class B extends Component{
    const { sendVal } = this.props
    render() {
        return (
            <div>
                <p>B组件接收到的值是：{sendVal}</p>
            </div>
        )
    }
}
class Public extends Component{
    state = {
        inputVal: "module Public default value"
    }
    handleUpdate= (inputVal) => {
        this.setState({
            inputVal: inputVal
        })
    }
    render() {
        return (
            <div>
                <A sendFn={this.handleUpdate}></A>
                <B sendValue={this.state.inputVal}></B>
            </div>
        )
    }
}
export default Public

兄弟组件传值(A传B)需要使用公共组件(Public)进行过渡，即A传Public、Public传B。

A组件通过监听input框输入的值，然后点击按钮，在按钮事件中会调用公共组件中的更新视图(handleUpdate)的方法，将文本框的值作为参数传进去，然后公共组件就获取到A组件的值，然后将公共组件的值传给B组件，B组件再去就接收就能获取到公共组件的值，这样，也就获取到A组件传过来的值。