React Bootstrap Offcanvas内Button的onClick加载时自动触发问题

你在Button组件的onClick属性上直接写了alert('hello')，这行代码会在组件渲染阶段被直接执行，你绑定的是函数执行后的返回值，而非可触发的函数引用，所以每次组件加载、重渲染时alert都会自动弹出，不需要等待用户点击操作。

只需要给onClick传入合法的函数引用即可，两种常用写法：

• 内联箭头函数包裹逻辑
  直接修改按钮的onClick绑定：

  <Button variant="danger" onClick={() => alert('hello')}>Reset</Button>
  

• 抽离独立事件处理函数
  如果点击后要执行的逻辑比较复杂，推荐把逻辑抽成单独的函数再绑定：

  // 在组件作用域内定义处理函数
  const handleResetClick = () => {
    alert('hello')
    // 其他重置相关业务逻辑写在这里
  }
  
  // JSX中绑定函数引用，注意不要加调用括号
  <Button variant="danger" onClick={handleResetClick}>Reset</Button>
  

避坑提示：所有React事件绑定都要遵循这个规则，只要你给事件属性传的是加了括号的函数调用，都会在渲染阶段直接执行，不会等待交互触发。

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