React 事件
就像 HTML DOM 事件一样，React 可以根据用户事件执行操作。
React 具有与 HTML 相同的事件：click、change、mouseover 等。
添加事件
React 事件使用驼峰命名法编写
onClick 而不是 onclick。
React 事件处理程序写在花括号内
onClick={shoot} 而不是 onclick="shoot()"。
React
<button onClick={shoot}>Take the Shot!</button>
HTML
<button onclick="shoot()">Take the Shot!</button>
示例
将 shoot 函数放在 Football 组件内
function Football() {
const shoot = () => {
alert("Great Shot!");
}
return (
<button onClick={shoot}>Take the shot!</button>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);
传递参数
要将参数传递给事件处理程序，请使用箭头函数。
示例
使用箭头函数将“Goal！”作为参数发送到 shoot 函数
function Football() {
const shoot = (a) => {
alert(a);
}
return (
<button onClick={() => shoot("Goal!")}>Take the shot!</button>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);
React 事件对象
事件处理程序可以访问触发该函数的 React 事件。
在我们的示例中，事件是“click”事件。
示例
箭头函数：手动发送事件对象
function Football() {
const shoot = (a, b) => {
alert(b.type);
/*
'b' represents the React event that triggered the function,
in this case the 'click' event
*/
}
return (
<button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);
在我们以后的章节中学习 表单 时，这将非常有用。
