之前在react组件中,点击按钮改变input框的编辑状态。我们给结构添加onClick,咦?奇怪,为什么不是onclick(),原生js就这样写的啊。
原来:
React处理事件跟在 DOM 元素上处理事件非常相似。但是有一些语法上的区别:
- React 事件使用驼峰命名,之前讲解jsx提过,属性都是驼峰式。而不是全部小写。
- 通过 JSX , 你传递一个函数作为事件处理程序,而不是一个字符串。
//html
<button onclick="activateLasers()">
Activate Lasers
</button>
//react
<button onClick={activateLasers}>
Activate Lasers
</button>
- 在 React 中你不能通过返回 false(即 return false; 语句) 来阻止默认行为。必须明确调用 preventDefault。
例如,要阻止链接打开一个新页面的默认行为,可以这样写:
//html
<a href=""http://www.baidu.com" onclick="console.log('链接被点击'); return false">
Click me
</a>
//输出链接被点击,但未打开新页面
//react
handleClick(e) {
e.preventDefault();
console.log('链接被点击');
}
render() {
return (
<a href="http://www.baidu.com" onClick={this.handleClick}>闪动的文字</a>
)
}