Блог

Я закодировал функцию OnClick, которая открывает окно с подробным описанием выбранного объекта.

Однако окно всегда остается открытым, и для его удаления вам необходимо обновить страницу. Я хотел бы убедиться, что при втором щелчке страница возвращается, как и раньше, путем отмены функции, вызываемой при первом щелчке.

    const setActiveTutorial = (tutorial, index) => {
        setCurrentTutorial(tutorial);
        setCurrentIndex(index);
      };

...

                    {tutorials amp;amp;
                      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>
...
  

Если вы хотите использовать ту же функцию, вы можете просто добавить условие, где if currentTutorial уже имеет значение, тогда оно закрывает страницу

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

Это предполагает, что вы не можете нажать на другой учебник, пока текущий активен.