一、簡(jiǎn)介
頁(yè)面交互必然會(huì)伴隨事件的發(fā)生粘秆，譬如HTML中的一個(gè)button被點(diǎn)擊了一下如迟，接下來頁(yè)面應(yīng)該怎么反應(yīng)？就是需要button的onClick事件函數(shù)來處理。
二殷勘、使用方法
1此再、事件函數(shù)怎么寫？
HTML標(biāo)簽 與 React元素玲销，添加事件函數(shù)输拇，分別怎么寫？
// 傳統(tǒng)HTML的 click 事件函數(shù)寫法
< button onclick = "activateLasers()" >
Activate Lasers
</button >
// React的 click 事件函數(shù)寫法
< button onClick = { activateLasers } >
Activate Lasers
</button >
2贤斜、事件函數(shù)怎么傳參策吠？
// 傳遞參數(shù)給時(shí)間處理函數(shù)，兩種方式如下：
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
3蠢古、preventDefault
HTML中阻止表單提交動(dòng)作奴曙，只需要在提交事件里面 return false; 即可，React中則需要調(diào)用 preventDefault 函數(shù)草讶。
// 傳統(tǒng)HTML洽糟，用return false，來阻止表單提交
< form onsubmit = "console.log('You clicked submit.'); return false" >
<button type="submit">Submit</button>
</form >
// React中堕战，只能用preventDefault來阻止表單提交
function Form() {
function handleSubmit(e) {
e.preventDefault();
console.log('You clicked submit.');
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
}
