React：事件

React事件

（1）事件类型

使用React元素处理事件与处理DOM元素上的事件非常相似。不过有一些语法上的差异：

• React事件使用小驼峰命名法，而不是全部小写命名。

• React事件使用JSX传递一个函数作为事件处理程序，而不是一个字符串。

示例：

• 鼠标事件：onClick onDoubleClick onMouseDown

• 触摸事件：onTouchStart onTouchMove onTouchEnd

• 键盘事件：onKeyDown

• 剪切事件：onCopy onCut onPaste

• 表单事件：onChange onInput onSubmit

• 焦点事件：onFocus

• UI事件：onScroll

• 滚动事件：onWheel

（2）事件对象

• React对原生的事件系统也进行了封装，在React中的事件对象实际上是一个跨浏览器的虚拟事件对象 ，它拥有和原生事件对象相同的属性和方法。

• 在react 中使用“return false” 无法阻止默认事件，只能通过事件对象调用“event.preventDefault() ”进行阻止

class ClickEvent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 'hello world'
        };
        this.changeData = this.changeData.bind(this);
    }
​
    changeData(event) {
        console.log(event)
        this.setState({value: '萨瓦迪卡'});
    }
​
    render() {
        return (
            <div>
                <button onClick={this.changeData}>点击改变</button>
                <h2>{this.state.value}</h2>
            </div>
        );
    }
}

 

（3）事件绑定

事件处理函数内部使用this 关键词时其指向需要注意：

class ClickEvent extends React.Component {
​
    changeData() {
        console.log(this);//undefined
    }
​
    render() {
        return (
            <div>
                <button onClick={this.changeData}>点击改变</button>
            </div>
        );
    }
}

 

解决方法：

• constructor 内部对事件处理函数bind 绑定this(官方推荐)

• 每次事件绑定都对事件处理函数做bind 绑定

• 定义事件处理函数时使用箭头函数

  <button onClick={e=>this.changeData.call(this)}>点击改变</button>

   

当事件处理函数需要传参时：

<button onClick={this.changeData.bind(this,id)}>点击改变</button>
<h2>{e=>this.changeData.call(id,event)}</h2>