react组件通信 -- 父子组件

父子组件：

• 父组件 --> 子组件

父组件 设置好state,定义缓存和改变state的方法，子组件只负责展示 state（父组件的state,可以作为子组件的props（只读，不可改变））

//父组件

class  Parent extends Component {
    constuctor() {
        super();
        this.state = { value: '',}
    }
    handleChange = e => {
        this.value = e.target.value;
    }
    hanldeClick = () => {
        this.setState({   
            value: this.value,
        })
    }
    render() {
        return (
            <div>
                我是parent
                <input onChange = {this.handleChange} />
                <div calssName='button' onClick = {}> 通知  </div>
                <div> <Child value = { this.state.value } /></div>
            </div>
        );
    }
}



//子组件
class Child extends Component {
    render() {
        const {  value } = this.props;
        return(     
            <div> 我是child,得到传下俩的值：{value} </div>
        );
    }
}

子组件-->  父组件  ---  父组件将改变state的方法函数传递给子组件，子组件自己处理内部的状态，当child组件分发消息时，会执行父组件传递的函数，从而改变父组件的state进而重新渲染

• • state 定义在parent 组件

// Parent 

class Parent extends Component {
    constructor() {
        super();
        this.state = { value: '',}
    }
    setValue = value => {
        this.setState({ value: this.value,})
    }
    render(){
        return(
            <div>
                <div> 我是parent, value是： {this.state.value}</div>
                <Child setValue = {this.setValue } />
            </div>
        )
    }
}

//Child 
    class Child extends Component {
        handleChange = e => {
            this.value = e.target.value;
        }        
        hanldeClick = () => {
            const { setValue } = this.props;
            setValue(this.value);
        }      
        render() {
            return(
                <div> 
                    我是Child
                    <div ClassName="Card">
                        state 定义在parent
                        <input onChange={this.handleChange} />
                        <div className='button' onClick={this.handleClick}>通知</div>
                    </div>    
                </div>
            )   
        }
    }

• • state 定义在child 组件

// parent 
class Parent extends Component {
    onChange = value => {
        console.log(value, '来自child的value变化');
    }
    render() {
        return (
            <div> 我是parent 
                <Child onChange = {this.onChange} />
            </div>
        );
   }        

}

//Child
class Child extends Component {
    constructor() {
        super();
        this.state = { childVaule: ''}
    }   
    childValueChange = e => {
        this.childVal = e.target.value;
    }
    childValDispatch = () => {
        const { onChange } = this.props;
        this.setState({
            childValue: this.childVal,
        },() => { onChange(this.state.childValue) })
    }
    render() {
        return (
            <div>
                我是Child
                <div className='card'>
                    state定义在 child
                    <input onChange={this.childValChange} />
                    <div className='button' onClick={this.childValueDispatch}>通知</div>
                </div>
            <div>
        )
    }
}