Vue&React事件处理

声明：

事件处理的方式

当子组件不足以处理某个事件时，事件处理有如下两种方式：

• 将事件抛给父组件，让其处理
  这是Vue的标准处理方式
• 调用父组件给的处理器进行处理
  这是React的标准处理方式。Vue也可以实现这种处理方式，但是那样就丢掉了众多与此相关的常用指令

抛出式处理方式（Vue示例）

• MtkInput.vue(子组件)

<template>
    <input type="text" v-on:input="$emit('input',$event.target.value)"/>
</template>

<script>
class MtkInput {
    constructor(){}
}

export default new MtkInput;
</script>

• MtkInputText.vue(父组件)

<template>
    <div>
        <p>input:{{inputContent}}</p>
        <mtk-input  v-on:input="handleInput"/>
    </div>
</template>

<script>
import MtkInput from './MtkInput.vue'

class MtkInputText {
    constructor(){
        this.data = this.dataInit
        this.components = {
            'mtk-input' : MtkInput
        }
        this.methods = {
            handleInput : this.handleInput
        }
    }

    handleInput(inputContent){ 
        this.inputContent = inputContent
    }

    dataInit(){
        return {
            inputContent : ''
        }
    }
}

export default new MtkInputText;
</script>

这里子组件MtkInput无法处理input事件，然后向父组件抛出一个input事件，并附上输入的值，父组件MtkInputText监听这个事件然后调用处理器进行处理
Vue还有更加方便的v-model指令，详情可看在组件上使用v-model

处理器式处理方式(React示例)

• MtkInput.js(子组件)

import React from 'react'

class MtkInput extends React.Component {
    constructor(props){
        super(props)
        this.onInput = this.onInput.bind(this)
    }

    onInput(e){
        this.props.onInput(e.target.value)
    }

    render() {
        return (
            <input type="text" onInput={this.onInput}></input>
        )
    }
}

export default MtkInput;

• MtkInputText.js(父组件)

import React from 'react'
import MtkInput from './MtkInput'

class MtkInputText extends React.Component {
    constructor(props){
        super(props)
        this.state = {inputContent : ''}
        this.onInputHandle = this.onInputHandle.bind(this)
    }

    onInputHandle(inputContent){
        this.setState(()=>{return {inputContent : inputContent};})
    }

    render(){
        return (
            <div>
                <p>input:{this.state.inputContent}</p>
                <MtkInput onInput={this.onInputHandle}/>
            </div>
        )
    }
}

export default MtkInputText;

这里子组件MtkInput无法处理input事件，但是父组件传入了一个处理器，然后子组件就调用这个处理器来处理事件

参考文档: