React学习笔记9：组件事件绑定

react事件绑定

React中的事件绑定，通过语法 on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名法

基础实现

不传递任何参数，只调用相关方法

function App() {
  const myHandleClick = () => {
    console.log("clicked");
  };
  return (
    <div>
      <button onClick={myHandleClick}>Click me</button>
    </div>
  );
}

export default App;

效果：

传递事件参数

传递事件参数 eventapp.js 代码如下：

function App() {
  const myHandleClick = (event) => {
    console.log("clicked", event);
  };
  return (
    <div>
      <button onClick={myHandleClick}>Click me</button>
    </div>
  );
}

export default App;

效果：

传递自定义参数

app.js 代码

function App() {
  const myHandleClick = (params) => {
    console.log("clicked", params);
  };
  return (
    <div>
      <button onClick={() => myHandleClick("自定义参数")}>Click me</button>
    </div>
  );
}

export default App;

效果

注意：这里要通过一个箭头函数调用 handleClick 函数。不能在 {} 中直接调用 handleClick 函数，否则会页面加载完毕后，会理解调用此方法，而不是等待点击按钮后再调用。

错误代码：

<button onClick={myHandleClick("自定义参数")}>Click me</button>

同时传递事件参数和自定义参数

app.js 代码

function App() {
  const myHandleClick = (params, event) => {
    console.log("clicked", params, event);
  };
  return (
    <div>
      <button onClick={(event) => myHandleClick("自定义参数", event)}>
        Click me
      </button>
    </div>
  );
}

export default App;

效果：