事件绑定

1export default function App() {
2  const handler = () => {
3    console.log("按钮点击了");
4  };
5  return (
6    <div>
7      <button onClick={handler}>按钮</button>
8    </div>
9  );
10}

1export default function App() {
2  const handler = (e) => {
3    console.log("事件对象", e);
4  };
5  return (
6    <div>
7      <button onClick={handler}>按钮</button>
8    </div>
9  );
10}

1// 注意：不能直接写函数调用,事件绑定位置改造成箭头函数的写法
2export default function App() {
3  const handler = (param) => {
4    console.log(param);
5  };
6  return (
7    <div>
8      <button onClick={() => handler("dancy")}>按钮</button>
9    </div>
10  );
11}

1// 注意：不能直接写函数调用,事件绑定位置改造成箭头函数的写法
2export default function App() {
3  const handler = (param, e) => {
4    console.log(param, e);
5  };
6  return (
7    <div>
8      <button onClick={(e) => handler("dancy", e)}>按钮</button>
9    </div>
10  );
11}

1export default function App() {
2  const handler = <T,>(param: T) => {
3    console.log(param);
4  };
5  return (
6    <div>
7      { }
8      <button onClick={() => handler("dancy")}>按钮</button>
9    </div>
10  );
11}

:::

onClick={() => handler("dancy")} 为什么用箭头函数？

传递参数：当你需要在事件处理函数中传递额外的参数时,直接将 handler 绑定到 onClick 是不行的,因为 onClick 会自动传递事件对象e作为第一个参数。通过使用箭头函数,你可以控制传递给 handler 的参数。
延迟执行：箭头函数确保 handler("dancy") 不会在组件渲染时立即执行,而是等到按钮被点击时才执行。如果直接写 handler("dancy"),它会在组件渲染时立即执行,这通常不是我们想要的行为。

事件绑定#

事件绑定