react如何阻止默认行为
阻止默认行为的方法
在React中阻止默认行为通常通过事件对象的preventDefault方法实现。以下是几种常见场景的解决方案：
表单提交阻止
function handleSubmit(e) {
e.preventDefault();
// 自定义提交逻辑
}
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>链接点击阻止
function handleClick(e) {
e.preventDefault();
// 自定义导航逻辑
}
<a href="/about" onClick={handleClick}>About</a>合成事件注意事项
React使用合成事件系统，但preventDefault用法与原生DOM一致。事件对象会被自动回收，如需异步访问事件属性需调用e.persist()。
类组件中的使用
class MyComponent extends React.Component {
handleEvent = (e) => {
e.preventDefault();
// 处理逻辑
}
render() {
return <button onClick={this.handleEvent}>Click</button>;
}
}事件委托场景
当使用事件委托时，仍需在事件处理函数中调用preventDefault，React的事件系统会自动处理事件委托的细节。
键盘事件阻止
function handleKeyDown(e) {
if (e.key === 'Enter') {
e.preventDefault();
// 处理回车键逻辑
}
}
<input onKeyDown={handleKeyDown} />以上方法适用于React 16+版本，核心原理都是通过事件对象调用preventDefault方法。React的事件系统是跨浏览器包装器，能保证在不同浏览器中表现一致。
