将多个操作传递给反应引导按钮中的 onClick 事件

Passing multiple actions to onClick event in a react-bootstrap Button

本文关键字：按钮 事件 onClick 操作      更新时间：2023-09-26

考虑一个带有 react-bootstrap 组件的 react/redux 应用程序。

这可能是一个非常新手的问题，但我正在尝试将多个操作传递给 react-bootstrap 库中按钮上的单个 onClick 事件。

<Button bsStyle="success" bsSize="small" onClick={someCallback; someOtherCallback;}>
  Something
</Button>

如何正确地做到这一点？

将它们包装在另一个函数中：

<Button bsStyle="success" bsSize="small" onClick={onButtonClick}>
  Something
</Button>
...
onButtonClick = function(event){
  someCallback()
  someOtherCallback()
}

在触发按钮时，可以使用以下代码执行多项操作

function doMagic {
  //do something
  //do another thing
}
<Button bsStyle="success" bsSize="small" onClick="doMagic()">
  Something
</Button>

我的应用程序（使用 React JS + Bootstrap 5）遇到了类似的问题。我想使用 onClick 来调用 API（searchDataRange），并渲染我页面的一部分（const [renderItems， setRenderItems] = useState（false）;)

.

我首先尝试了这个（没有工作！

 <Button type="button" 
             className="btn btn-light mx-2"
             onClick={() => setRenderItems(!renderItems); searchDataRange} </Button>

我尝试了几种不同的组合（），{}等，但这解决了问题（解决方案）：

  const trigger = () => {
    setRenderItems(!renderItems);
    searchDateRange();
 }
return(

 <Button type="button" 
             className="btn btn-light mx-2"
             onClick={trigger}>Search</Button>
             
            </div> ...

我认为OnClickCapture也适用于辅助点击事件。可能不是最有效的方法，但我认为如果您同时使用第一个函数的 Onclick 和第二个函数的 OnclickCapture。

相关文章：