前端速成react——react事件绑定

---

🎯 什么是 React 的“事件绑定”？

通俗点说：

事件绑定 = 在某个元素上“绑定一个操作”，比如点击按钮时让它执行一个函数。

和原生 HTML 里用 onclick="..." 一样，只不过 React 用的是 JavaScript 里的方式来“绑定”事件。

---

✅ 最基本的写法：

function App() {
  const handleClick = () => {
    alert("按钮被点击啦！");
  };

  return (
    <button onClick={handleClick}>点我</button>
  );
}

---

🔍 说明：

• onClick={handleClick} 就是“绑定点击事件”

• 当按钮被点击，就会运行 handleClick 这个函数

---

💡 事件绑定特点：

项目	React 中的写法
点击事件	onClick
鼠标移入	onMouseEnter
表单提交	onSubmit
键盘按下	onKeyDown
输入框改变	onChange

---

🧠 小例子：计数器

function Counter() {
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>你点了 {count} 次</p>
      <button onClick={handleClick}>点我 +1</button>
    </div>
  );
}

---

🚨 注意事项：

不要这样 ❌	应该这样 ✅
onClick="doSomething()"	onClick={doSomething}
onClick={doSomething()}	onClick={() => doSomething()}

---

✅ 总结一句话：

React 的事件绑定 = 用 onEventName={函数} 的方式，在 JSX 中给元素加上“交互功能”。