const Comp = React.createClass({
clickHandler (event) {
console.log(event)
},
render () {
return <div>
<button onClick={this.clickHandler}>點(diǎn)我</button>
</div>
}
})
ReactDOM.render(<Comp />, document.getElementById('root'))
點(diǎn)擊時(shí)可以看到event對(duì)象的相關(guān)屬性
圖片.png
event對(duì)象的通用屬性
boolean bubbles //事件是否可以冒泡
boolean cancelable// 事件是否可以取消
DOMEventTarget currentTarget //
boolean defaultPrevented // 事件是否禁止默認(rèn)行為
number eventPhase // 事件所處的階段
boolean isTrusted //事件是否可信，可信事件即用戶自定義觸發(fā)的事件，不可信事件即用js代碼觸發(fā)的事件
DOMEvent nativeEvent //使用原生的瀏覽器發(fā)出的事件對(duì)象
void preventDefault() // 禁止默認(rèn)行為
void stopPropagation() // 禁止冒泡
DOMEventTarget target:
number timeStamp
string type
不同事件對(duì)象的特有屬性可參考這篇文章
在上例中看到event對(duì)象的各個(gè)屬性值都是null，在react中是event合成事件對(duì)象，類似于事件池务漩，只在調(diào)用時(shí)會(huì)存在相關(guān)屬性，可以修改代碼來看。
const Comp = React.createClass({
clickHandler (event) {
console.log(event)
console.log(event.type)
console.log(event.bubbles)
},
render () {
return <div>
<button onClick={this.clickHandler}>點(diǎn)我</button>
</div>
}
})
ReactDOM.render(<Comp />, document.getElementById('root'))
圖片.png
react支持的事件可以參考這里
中文版api參考
自定義事件
其實(shí)就是將定義的方法作為props給傳遞進(jìn)去
const Comp = React.createClass({
getInitialState () {
return {
'name': ''
}
},
changeHandle (event) {
this.setState({
'name': event.target.value
})
this.props.onChangeName(this.state.name) //把自定義的事件作為props給傳遞進(jìn)來
},
render () {
return <div>
<input type="text" value={this.state.name} onChange={this.changeHandle} />
</div>
}
})
function changeNameHandle (name) { //自定義事件
console.log(name)
}
ReactDOM.render(<Comp onChangeName={changeNameHandle} />, document.getElementById('root'))
圖片.png
