如何在ReactJS中的第二次单击上撤消OnClick函数

问题描述

我已经编码了一个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>
...

解决方法

如果要使用相同的功能，只需添加一个条件即可，如果currentTutorial已经有一个值，则它将关闭页面

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

这假设您在当前教程处于活动状态时无法单击其他教程。