React事件处理笔记一
React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:React 事件绑定属性的命名采用驼峰式写法，而不是小写。如果采用 JSX 的语法需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)
HTML 通常写法是：
React 中写法为：
在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为， 你必须明确的使用 preventDefault。
例如，通常在 HTML 中阻止链接默认打开一个新页面，可以这样写：
点我
在 React 的写法为：
function ActionLink() {function handleClick(e) {e.preventDefault();
console.log('链接被点击');
}
return (
点我
【React事件处理笔记一】
);
}
实例中 e 是一个合成事件。
使用 React 的时候通常不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。仅仅需要在这个元素初始渲染的时候提供一个监听器。
当使用 ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法。例如，下面的 Toggle 组件渲染一个让用户切换开关状态的按钮：
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 这边绑定是必要的，这样 `this` 才能在回调函数中使用
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
);
}
}
ReactDOM.render(
document.getElementById('example')
);
推荐阅读
- 事件代理
- Java|Java OpenCV图像处理之SIFT角点检测详解
- 事件处理程序
- Android事件传递源码分析
- 66万奔驰漏油事件看宝宝无理取闹
- 爬虫数据处理HTML转义字符
- 「我的2017」——2017|「我的2017」——2017,大事件盘点
- react|react 安装
- Quartz|Quartz 源码解析(四) —— QuartzScheduler和Listener事件监听
- Android|Android BLE蓝牙连接异常处理