React event

React event

 

组件：

• React 自有方法
• 用户定义方法

 

一、虚拟事件对象

事件处理器将会传入 虚拟事件对象 的实例，一个对浏览器本地事件的跨浏览器封装。它有和浏览器本地事件相同的属性和方法，包括 stopPropagation() 和 preventDefault()，但是没有浏览器兼容问题。

如果因为一些因素，需要底层的浏览器事件对象，只要使用 nativeEvent 属性就可以获取到它了。每一个虚拟事件对象都有下列的属性：

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
void stopPropagation()
DOMEventTarget target
number timeStamp
string type

 

注意：

对于 v0.12，在事件处理函数中返回 false 将不会阻止事件冒泡。取而代之的是在合适的应用场景下，手动调用 e.stopPropagation() 或者 e.preventDefault()。

---

 

二、支持的事件

React 标准化了事件对象，因此在不同的浏览器中都会有相同的属性。

如下的事件处理器在事件 冒泡阶段触发。要在捕获阶段触发某个事件处理器，在事件名字后面追加 Capture 字符串；例如，使用 onClickCapture 而不是 onClick 来在捕获阶段处理点击事件。

1、剪贴板事件

事件名：
onCopy 
onCut 
onPaste

属性：
DOMDataTransfer clipboardData

2、键盘事件：

事件名：
onKeyDown 
onKeyPress 
onKeyUp

属性：
boolean altKey
Number charCode
boolean ctrlKey
function getModifierState(key)
String key
Number keyCode
String locale
Number location
boolean metaKey
boolean repeat
boolean shiftKey
Number which

 

 

3、焦点事件

事件名：
onFocus 
onBlur

属性：
DOMEventTarget relatedTarget

 

 

4、表单事件

事件名：
onChange 
onInput 
onSubmit

 

 

5、鼠标事件

事件名：
onClick 
onContextMenu:右键，上下文菜单
onDoubleClick 
onDrag 
onDragEnd 
onDragEnter
onDragExit 
onDragLeave 
onDragOver 
onDragStart 
onDrop 
onMouseDown 
onMouseEnter 
onMouseLeave 
onMouseMove 
onMouseOut 
onMouseOver 
onMouseUp

属性：
boolean altKey
Number button
Number buttons
Number clientX
Number clientY
boolean ctrlKey
function getModifierState(key)
boolean metaKey
Number pageX
Number pageY
DOMEventTarget relatedTarget
Number screenX
Number screenY
boolean shiftKey

 

 

6、触摸事件

为了使触摸事件生效，在渲染所有组件之前调用

React.initializeTouchEvents(true)。该方法是React顶层API

initializeTouchEvents(boolean shouldUseTouch)

配置 React 的事件系统，使 React 能处理移动设备的触摸（ touch ）事件。

事件名：
onTouchCancel 
onTouchEnd 
onTouchMove 
onTouchStart

属性：
boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
function getModifierState(key)
boolean metaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches

 

 

7、UI 事件

事件名：
onScroll:元素或页面的滚动事件

属性：
Number detail
DOMAbstractView view

 

 

8、鼠标滚轮滚动事件

事件名：
onWheel:监听滚动的位置、方向

属性：
Number deltaMode:单位
Number deltaX
Number deltaY
Number deltaZ:坐标轴对应的位置

 

三、自定义事件

没有嵌套关系的组件（如兄弟组件）之间的通信，只能通过自定义事件的方式来进行。

详见：https://www.cnblogs.com/Michelle20180227/p/9105585.html

var EventEmitter = require('events').EventEmitter;
import React,{Component} from 'react';
import ReactDOM from 'react-dom';

let emitter = new EventEmitter();

class ListItem extends Component{
    static defaultProps = {
        checked: false
    };
    constructor(props){
        super(props);
    }
    render(){
        return (
            <li>
                <input type="checkbox" checked={this.props.checked} onChange={this.props.onChange} />
                <span>{this.props.value}</span>
            </li>
        );
    }
}

class List extends Component{
    constructor(props){
        super(props);

        this.state = {
            list: this.props.list.map(entry=>({
                text:entry.text,
                checked:entry.checked || false
            }))
        };
        console.log(this.state);
    }

    onItemChange(entry){
        const {list} = this.state;
        this.setState({
            list:list.map(prevEntry=>({
                text: prevEntry.text,
                checked:prevEntry.text === entry.text? !prevEntry.checked : prevEntry.checked
            }))
        });
        //这里触发事件
        emitter.emit('ItemChange',entry);
    }
    render(){
        return (
            <div>
                <ul>
                    {this.state.list.map((entry,index)=>{
                        return (<ListItem
                            key={`list-${index}`}
                            value = {entry.text}
                            checked = {entry.checked}
                            onChange = {this.onItemChange.bind(this, entry)}
                        />);
                    })}
                </ul>
            </div>
        );
    }
}

class App extends Component{
    constructor(props){
        super(props);
    }
    componentDidMount(){
        this.itemChange = emitter.addListener('ItemChange',(msg,data)=>console.log(msg));//注册事件
    }
    componentWillUnmount(){
        emitter.removeListener(this.itemChange);//取消事件
    }
    render(){
        return (
            <List list={[{text:1},{text:2}]}/>
        )
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById('root')
);