React JS中onClick函数自动执行触发类型错误如何解决

你当前的写法会在组件渲染阶段直接执行functionExample函数，并将函数的返回值赋值给onClick属性，而不是将函数本身作为点击事件的回调。你观测到的「功能正常运行」实际是假象：函数是在组件渲染时就触发执行，并非点击按钮时才触发，属于隐藏逻辑bug。

下面是3种常用的正确实现方式，按需选择即可：

• 方案1：箭头函数包裹回调
  最常用的轻量实现，直接在事件绑定位置用匿名箭头函数包裹要执行的逻辑，仅在点击事件触发时才会执行内部逻辑：

  <button 
    onClick={() => functionExample("stringParam", true)} 
    id='buttonId' 
    className="buttonClass" 
  />
  

  注意：如果该按钮是封装的子组件，该写法可能会触发子组件不必要的重渲染，纯原生按钮场景无需考虑这个问题。

• 方案2：改造为柯里化函数
  如果你希望保持onClick={functionExample(参数)}的写法，可以把原函数改造为柯里化形式，让它执行后返回一个待调用的函数：
  原函数改造示例：

  // 改造前
  // function functionExample(param1, param2) {
  //   // 原有逻辑
  // }
  
  // 改造后
  const functionExample = (param1, param2) => () => {
    // 原有逻辑不变
  }
  

  改造后你的原有绑定代码无需修改即可正常运行，不会触发警告。

• 方案3：使用bind绑定参数
  也可以通过bind方法预先给函数绑定入参，同时指定上下文，返回的是待执行的函数实例：

  <button 
    onClick={functionExample.bind(this, "stringParam", true)} 
    id='buttonId' 
    className="buttonClass" 
  />
  

  类组件场景使用该方案时需要注意this指向是否符合预期。

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