如何在按钮 onClick 上触发两个功能？

Question

我正在 React 中创建一个页面，左侧有一个侧边栏，单击任何按钮都会在右侧加载不同的 iFrame。

为了处理这个问题，我正在使用：

const [page, setPage ] = useState("FirstFrame");  

当谈到我正在使用的按钮时：

onClick={() => setPage("FirstFrame")}> 

现在的问题是，我必须在单击每个按钮时向它们添加一个活动类。我正在使用的：

const handleClick = (index) => {
    setActiveButton(index); 
 };

并在按钮上：

onClick={() => handleClick(0)} className={activeButton ===0 ? 'activeBTN' : ''}

但是我不能在这里使用两个

onClick

。我该如何解决这个问题？

Answer 1

您可以在

setPage

事件处理程序中调用

setActiveButton

和

handleClick

setter 函数。

const handleClick = (index, currentFrame) => {
    setActiveButton(index); 
    setPage(currentFrame);
};

<button
 onClick={() => handleClick(0, "FirstFrame")} className={activeButton ===0 ? 'activeBTN' : "">
   Text
</button>

''}