React组件包含渲染逻辑JavaScript代码，以及DOM结构的HTML代码。在传统的网页HTML中，HTML标签也是有一些处理逻辑的，比如<button>可以指定一个onClick属性用来回调JavaScript函数。在React中，处理HTML标签的事件和原始写法稍有不同。
下面代码中，我们给按钮绑定了一个回调函数。
const App = () => {
return (
<div>
<button
onClick={() => {
console.log("Button clicked!");
}}
>
Click Me
</button>
</div>
);
};
export default App;
代码中，我们为onClick属性传递了一个匿名函数作为参数，函数体内包含了处理点击事件的逻辑。实际上，我们也可以将函数抽离出来单独定义，这样代码更加清晰，下面是一个例子。
const App = () => {
const handleBtnClick = () => {
console.log("Button clicked!");
};
return (
<div>
<button onClick={handleBtnClick}>Click Me</button>
</div>
);
};
export default App;
代码中我们定义了handleBtnClick()作为按钮点击的回调。
对于其它的HTML原生标签也是类似的，标签支持的事件都有on开头的属性供我们设置，比如onChange等，我们为其传递回调函数即可处理对应事件。
原始的事件机制中，我们可以通过return false阻止事件的默认行为，在React中，如果想要阻止事件的默认行为，我们必须写明event.preventDefault()。
const handleBtnClick = (event) => {
event.preventDefault();
console.log("Button clicked!");
};
向事件回调函数中传递参数可以采用如下方式实现。
const App = () => {
const handleBtnClick = (event, data) => {
event.preventDefault();
console.log(data);
};
return (
<div>
<button
onClick={(event) => {
handleBtnClick(event, "foo");
}}
>
Click Me
</button>
</div>
);
};
export default App;
这里注意onClick这类属性的回调函数参数是固定的，其第一个参数为事件对象event，如果我们要向回调函数中传递其它参数，可以自行再封装一层。