React的事件处理函数用法详解！
原创React的事件处理函数用法详解！
原创
Learn-anything.cn
发布于 2021-11-28 06:10:40
发布于 2021-11-28 06:10:40
一、简介
页面交互必然会伴随事件的发生，譬如HTML中的一个button被点击了一下，接下来页面应该怎么反应？就是需要button的onClick事件函数来处理。
二、使用方法
1、事件函数怎么写？
HTML标签 与 React元素，添加事件函数，分别怎么写？
// 传统HTML的 click 事件函数写法
< button onclick = "activateLasers()" >
Activate Lasers
</button >
// React的 click 事件函数写法
< button onClick = { activateLasers } >
Activate Lasers
</button >2、事件函数怎么传参？
// 传递参数给时间处理函数，两种方式如下：
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>3、preventDefault
HTML中阻止表单提交动作，只需要在提交事件里面 return false; 即可，React中则需要调用 preventDefault 函数。
// 传统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>
);
}三、参考链接：
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
