如何在ReactJS中第二次点击时撤消OnClick函数

Question

我已经编写了一个OnClick函数，该函数打开一个窗口，其中包含所选对象的详细描述。

但是，该窗口始终保持打开状态，若要删除它，必须刷新页面。我想通过撤消第一次单击时调用的函数来确保在第二次单击时页面像以前一样返回。

const setActiveTutorial = (tutorial, index) => {
setCurrentTutorial(tutorial);
setCurrentIndex(index);
};
...
{tutorials &&
tutorials.map((tutorial, index) => (
<TableRow
className={
"list-group-item " + (index === currentIndex ? "active" : "")
}
onClick={() => setActiveTutorial(tutorial, index)}
key={index}
>
<TableCell>{tutorial.title}</TableCell>
<TableCell>{tutorial.size}</TableCell>
<TableCell>{tutorial.country}</TableCell>
...

Answer 1

如果你想使用相同的函数，你可以添加一个条件，如果currentTutorial已经有了一个值，那么它就会关闭页面

const setActiveTutorial = (tutorial, index) => {
if(currentTutorial === tutorial){
setCurrentTutorial(null)
set setCurrentIndex(-1) //or whatever initial value
}
else{
setCurrentTutorial(tutorial);
setCurrentIndex(index);
};

这是假设您不能在当前教程处于活动状态时单击另一个教程。