React组件间通信

1.父组件->子组件

父组件向子组件通信是通过在子组件中定义属性实现的，然后子组件可以使用this.props拿到父组件的方法或者参数。例如：

父组件

import React from 'react';
import ButtonTest from './ButtonTest.js'

export default class RuleDemo3 extends React.Component{

    constructor(props){
        super(props)
        this.state = {value:"defaultState",enable:false}
    }
    handleClick(){
        this.setState({value:"newValue",enable:false})
    }

    handleChange(event){
        this.setState({value:event.target.value})
    }

    render(){
        return (
            <div>
                <input type="text" value={this.state.value}
                       onChange={this.handleChange.bind(this)}
                       readOnly={this.state.enable}/>
                <ButtonTest buttonText="点我呀" ref="buttonTest"
                            handleClick={this.handleClick.bind(this)}/>
            </div>
        )
    }
}

子组件

import React from 'react';

export default class ButtonTest extends React.Component{

    handleClick(){
        this.props.handleClick();
    }

    render(){
        return (
            <button onClick={this.handleClick.bind(this)}>{this.props.buttonText}</button>
        )
    }
}

上例中：父组件向子组件传递了一个参数buttonText，传递了一个事件handleClick。子组件通过this.props获取到了父组件传的内容。并且在按钮点击的时候回调了父组件的handleClick方法。

2.子组件->父组件

子组件可以直接在调用父组件的方法时，将需要传递的值当作参数，传递给父组件。

例如，我们将上例的handleClick做一下修改。

父组件

handleClick(newValue){
        this.setState({value:newValue,enable:false})
}

子组件

handleClick(){
        this.props.handleClick("this is newValue");
}

点击按钮的时候，文本框的值就变成了“this is newValue”。

3.父组件调用子组件的方法

父组件调用子组件的方法通过ref来实现。

首先在父组件中定义子组件的ref属性,之后就可以直接通过this.refs.属性名.子组件方法来访问了。

this.refs.buttonTest.handleClick()

4.兄弟组件通信

首先需要明确一点，兄弟组件之间是不存在关联的，所以不能直接通信，兄弟组件的关联在于相同的父组件，所以需要进行兄弟组件之间通信的话，那么就需要在父组件中实现兄弟组件的变更操作。

例如：

父组件

import React from 'react';
import HolloTest from './HolloTest.js';
import ContentTest from './ContentTest.js';
import RuleDemo1 from "./RuleDemo1";
import RuleDemo2 from "./RuleDemo2";
import RuleDemo3 from "./RuleDemo3";

export default class DemoApp extends React.Component{

    constructor(props){
        super(props)
        this.state = {
            inputValue1:"I'm input one",
            inputValue2:"I'm input two"
        }
    }
    brothercommunication(index){
        if(index == 0){//第一个按钮
            this.setState({inputValue2:"兄弟，我支配你"})
        }else{//第二个按钮
            this.setState({inputValue1:"兄弟，你归我管"})
        }
    }

    render(){
        return (
            <div>
                <HolloTest/>
                <ContentTest/>
                <RuleDemo1 name="test">
                    <h1>my is child one</h1>
                    <h1>my is child two</h1>
                </RuleDemo1>
                <RuleDemo2 brothercommunication={this.brothercommunication.bind(this)} inputValue={this.state.inputValue1}/>
                <RuleDemo3 brothercommunication={this.brothercommunication.bind(this)} inputValue={this.state.inputValue2}/>
            </div>
        )
    }
}

子组件RuleDemo2

import React from 'react';

export default class RuleDemo2 extends React.Component{

    constructor(props){
        super(props)
        this.state = {enable:false}
    }
    componentDidMount(){//组件生命周期
        this.setState({enable:true})
    }
    handleClick(){
        this.setState({enable:false})
        this.props.brothercommunication(0);
    }

    handleChange(event){
        this.setState({value:event.target.value})
    }

    static defaultProps = {
        autoPlay: false,
        maxLoops: 10,
    };
    render(){
        return (
            <div>
                <input type="text" value={this.props.inputValue}
                       onChange={this.handleChange.bind(this)}
                       readOnly={this.state.enable}/>
                <button onClick={this.handleClick.bind(this)}>点我啊</button>
                <div>{this.props.maxLoops}</div>
            </div>
        )
    }
}

子组件RuleDemo3

import React from 'react';
import ButtonTest from './ButtonTest.js'

export default class RuleDemo3 extends React.Component{

    constructor(props){
        super(props)
        this.state = {value:"defaultState",enable:false}
    }
    handleClick(newValue){
        this.setState({enable:false})
        this.props.brothercommunication(1);
    }

    handleChange(event){
        this.setState({value:event.target.value})
    }

    render(){
        return (
            <div>
                <input type="text" value={this.props.inputValue}
                       onChange={this.handleChange.bind(this)}
                       readOnly={this.state.enable}/>
                <ButtonTest handleClick={this.handleClick.bind(this)}/>
            </div>
        )
    }
}

孙子组件ButtonTest

import React from 'react';

export default class ButtonTest extends React.Component{

    constructor(porps){
        super(porps)
        this.state = {
            buttonText:"点我呀"
        }
    }
    handleClick(){
        this.props.handleClick("this is newValue")
    }

    render(){
        return (
            <button onClick={this.handleClick.bind(this)}>{this.state.buttonText}</button>
        )
    }
}

实现的效果是点击第一个按钮，改变第二个按钮所在的组件的输入值，点击第二个按钮，改变第一个按钮所在组件的输入值。

效果图：