reactjs 事件的用法

组件由React自由方法和用户定义的方法构成

触摸：

onTouchCancel

onTouchEnd

onTouchMove

onTouchStart

键盘：

onKeyDown

onKeyPress

onKeyUp

剪切

onCopy

onCut

onPaste

表单：

onChange

onInput

onSubmit

焦点

onFocus

onBlur

UI

ocScroll

滚动

onWheel

鼠标

onClick

onContextMenu   //右键事件

onDoubleClick

onMouseDown

onMouseEnter

onMouseLeave

onMouseMove

onMouseOut

onMouseOver

onMouseUp

onDrop

onDrag

onDragEnd

onDragExit

onDragLeave

onDragOver

onDragStart

var HelloWorld=ReactClass({
handleChange:function(event){
console.log(event.target.value);
},
render:function(){
return <div><input onChange={this.handleChange}></input></div>;
}
});
React.render(<HelloWorld></HelloWorld>,document.body);

事件对象：

event.target 即为对象所对应的DOM元素

通用属性：

boolean bubbles

boolean cancelable

DOMEventTarget currentTarget

boolean defaultPrevented

number  eventPhase

boolean isTrusted

DOMEvent nativeEvent

void preventDefault()

void stopPropagation()

DOMEventTarget target

number timeStamp

String type

var HelloWorld=React.createClass({
getInitialState:function(){
return {
password:""
}
},
handleKeyPress:function(event){
this.setState({
password:this.state.password+event.which
});
console.log(this.state.password);
},
handleChange:function(event){
event.target.value="";
},
render:function(){
return <div>
<input onChange={this.handleChange} onKeyPress={this.onKeyPress}/>
<p style={this.state.password}.indexof('123455')>0?'inline':'none'>you get it!</p>
</div>


}
});

事件和状态的关联

this.setState();