React 17中如何通过onClick事件同时执行多个操作？

React 17 下绑定多操作的逻辑和过往主流版本没有差异，不需要做特殊适配，常用写法有两种：

• 内联包装函数写法
  直接在onClick属性里写箭头函数，函数体内按顺序调用你需要触发的所有方法即可，需要使用事件对象的话记得把参数透传进去：

  // 无事件参数的场景
  <div onClick={() => {
    myFunction1();
    myFunction2();
  }}></div>
  
  // 需要用到事件对象e的场景
  <div onClick={(e) => {
    myFunction1(e);
    myFunction2(e);
    // 要阻止冒泡、阻止默认行为也可以在这里统一处理
    // e.preventDefault()
  }}></div>
  

  注意不要写成onClick={myFunction1(); myFunction2()}，这种写法会在组件渲染时直接执行两个函数，不是点击触发，属于常见新手错误。

• 封装统一处理函数写法
  要是多个操作的逻辑比较长，写在内联里可读性差，可以提前在组件内把所有逻辑封装成一个单独的处理函数，再绑定到onClick上：

  // 组件作用域内提前定义
  const handleDivClick = (e) => {
    // 第一项操作
    console.log('触发第一个操作');
    myFunction1();
    // 第二项操作
    console.log('触发第二个操作');
    myFunction2(e);
  }
  
  // JSX中直接绑定封装好的函数
  <div onClick={handleDivClick}></div>
  

两种写法效果完全一致，根据代码可读性需求选择即可。

内容的提问来源于stack exchange，提问作者AlexTWO