React之事件(四)
# 一、编写事件处理函数

- 在函数体中进行一些操作,常见的有:更新页面内容,更新组件状态,与后台交互

书写方式
var Demo = React.createClass({
getInitialState:function(){ },
handleClick: function(event){ },
handleChange: function(){ },
render:function(){ },
})
@前端进阶之旅: 代码已经复制到剪贴板
- 上面的代码中有的有参数
event,有的没有,这个根据自己的需求
# 二、绑定事件处理函数
onClick={this,handleClick}- 需要注意的是:不要在事件后面添加上一个
()
其他的事件
- 触摸事件:
onTouchCancel,onTouchEnd,onTouchMove,onTouchStart - 键盘事件:
onKeyDown,onKeyUp,onKeyPress(前两者的组合) - 表单时间:
onChange,onInput,onSubmit - 焦点事件:
onFocus,onBlur - UI元素事件:
onScroll - 滚动事件:
onWhell(鼠标滚动) - 鼠标事件:
onClick,onContextMenu,onDoubleClick……
var Demo = React.createClass({
handleClick:function(e){
console.log(e)
console.log(e.target)
console.log(e.nativeEvent)
},
render:function(){
return <div onClick={this.handleClick}>Hello World</div>
}
})
ReactDOM.render(<Demo/>,document.getElementById('app'))
@前端进阶之旅: 代码已经复制到剪贴板
var Demo = React.createClass({