React入门系列 - 7. 事件触发与组件通信

1. 事件触发

React采用跟原生相同名字驼峰写法的props来定义触发类型。 好比onclick在React中使用onClick来定义触发的事件。

<div 
    onClick={(e)=>{
        console.log('onclick')
        console.log(e)
    }}
>点击触发事件</div>
复制代码

当用户点击以后，浏览器会在控制台输出

onclick
event:{}
复制代码

React为事件响应作了处理，在全部的浏览器中，event是统一的、拥有一致性。

若是你很是须要使用原生对象，那么能够经过event.nativeEvent来访问浏览器原生的事件方法。

在React中,绑定事件有不少种方式，可是我推荐使用=>箭头方法直接指定事件处理。这种方式集合众家所长。

2. 组件间通信

组件通信能够用React的方式，也能够采起Redux数据驱动通信的方式来进行。咱们来简单的讲述一下React的实现。

2.1 父向子通信

import React from 'react'

class Subchildren extends React.Component{
    render () {
        return <div>{this.props.text}</div>
    }
}


export default FatherChildren extends React.Component{
    static state = {
        count:0
    }
    
    handleAdd = () => {
        this.setState({count:this.state.count++})
    }

    render () {
        return <div> <Subchildren text={this.state.count}/> <button onClick={this.handleAdd}>喜加1</button> </div> } } 复制代码

这个时候，你点击按钮 喜加1 就会发现 子组件的内容会随着父组件中state.count的值变化而变化。

这是一种数据流向通信。由于只须要向子组件传递消息便可。

2.2 子向父通信

React中并无像Vue同样的监听子组件$on、$emmit的功能，可是不妨碍咱们将事件传入给子组件，由子组件经过事件将信息递交回父组件。

import React from 'react'

class Subchildren extends React.Component{
    render () {
        return <> <div>{this.props.text}</div>
        <button
            onClick={()=>{
                    this.props.onClick(0)
                }
            }
        >重置为0</button>
        </>
    }
}


export default FatherChildren extends React.Component{
    static state = {
        count:0
    }
    
    handleAdd = () => {
        this.setState({count:this.state.count++})
    }
    
    handlePostMessage = (count) => {
        this.setState({count})
    }

    render () {
        return <div>
            <Subchildren
                onClick={this.handlePostMessage}
                text={this.state.count}/>
            <button
                onClick={this.handleAdd}
            >喜加1</button>
        </div>
    }
}
复制代码

点击重置为0子组件并无去作重置操做，而是委托给父组件传递下来的事件进行操做。这样父组件就知道了子组件想要将数据修改成0了。

2.3 兄弟组件通信

兄弟组件通信其实就是：父子组件通信+子父组件通信的混合体。

先经过子向父通信，父组件接收到数据以后再写入到兄弟组件上去。

import React from 'react'

class Subchildren extends React.Component{
    render () {
        return <> <div>{this.props.text}</div>
        <button
            onClick={()=>{
                    this.props.onClick(100)
                }
            }
        >重置为0</button>
        </>
    }
}

class Subchildren2 extends React.Component{
    render () {
        return <> <div>{this.props.text}</div>
        </>
    }
}


export default FatherChildren extends React.Component{
    static state = {
        count:0,
        count2:0
    }
    
    handleAdd = () => {
        this.setState({count:this.state.count++})
    }
    
    handlePostMessage = (count) => {
        this.setState({count2:count})
    }

    render () {
        return <div>
            <Subchildren
                onClick={this.handlePostMessage}
                text={this.state.count}/>
            <Subchildren2 text={this.state.count2} />
            <button
                onClick={this.handleAdd}
            >喜加1</button>
        </div>
    }
}
复制代码

点击重置为0，你会发现Subchildren2组件显示数据的值为100。这样，兄弟组件就能相互通信了。他们是基于父组件进行的。

2.4 跨组件通信

2.4.1 发布订阅模式

跨组件通信，也就是多个组件在不一样的容器内组成，可是又相互有数据关系依赖这样的状况下，能够再顶层本身设计一个发布/订阅的方法。

这里不过多阐述。

2.4.2 this.context

这个方法其实就是兄弟组件通信的原理。由于React会从root层注册一个context,而每一个组件都会将context注册进来。

也就是说，全部的组件全局依赖一个顶层root的 context`。

redux也是基于这个模式设计的。

import React from 'react'

class Subchildren extends React.Component{
    render () {
        return <> <div>{this.props.text}</div>
        <button
            onClick={()=>{
                    this.context.handleAdd()
                }
            }
        >加1加1加1</button>
        </>
    }
}

class Subchildren2 extends React.Component{
    render () {
        return <> <div>{this.context.value}</div>
        </>
    }
}


export default FatherChildren extends React.Component{
    static state = {
        count:0,
        count2:0
    }
    
    handleAdd = () => {
        this.setState({count:this.state.count++})
    }
    getChildContext() {
        return {
            value: this.state.count,
            handleAdd: this.handleAdd
        }
    }
    handlePostMessage = (count) => {
        this.setState({count2:count})
    }

    render () {
        return <div>
            <Subchildren
                onClick={this.handlePostMessage}
                text={this.state.count}/>
            <Subchildren2 text={this.state.count2} />
            <button
                onClick={this.handleAdd}
            >喜加1</button>
        </div>
    }
}
复制代码

主要须要注意父组件的getChildContext,与子组件中的this.context。