Блог

У меня есть веб-страница React, на которой есть настроенная таблица, построенная с использованием material-ui. Каждая строка этой таблицы может быть расширена с помощью компонента сворачивания. Внутри каждой строки у меня есть мини-таблица, которая видна или нет, в зависимости от того, расширена строка или нет. Это работает правильно.

Тем не менее, у меня есть две небольшие ошибки, касающиеся Collpase, которые, как я вижу, значительно влияют на пользовательский интерфейс.

1. Внутри каждой из этих строк у меня также есть кнопка, с помощью которой можно открыть диалоговое окно с картой. Каждый раз, когда я открываю эту карту, расширенная строка закрывается. Как я могу избежать этой ситуации? Я думаю, что при каждом открытии карты в данные не нужно вносить никаких изменений, чтобы вызвать повторную отправку.
2. Внутри каждой строки у меня есть мини-таблица, как я уже говорил раньше. В этой таблице я могу вставлять/удалять/редактировать строки. И каждый раз, когда я пытаюсь это сделать, расширенная строка также закрывается. Как и в сценарии 1, строка закрывается, но в этом случае данные, привязанные к крючкам, изменяются. Есть ли способ избежать этой ситуации?

Я использую крючки реакции. Каждая строка моей основной таблицы выглядит примерно так.

 function Row(props) {
const [open, setOpen] = useState(false);
...
}
 

Заранее спасибо за любую помощь.

ИЗМЕНИТЬ: Как и было запрошено, у меня есть экран печати текущего состояния моего веб-приложения. Кроме того, у меня также есть код, используемый для обработки щелчка.

Мой код примерно такой…

 <Collapse in={open} timeout="auto" unmountOnExit>
{renderMiniTable()}
</Collapse>
 

Затем у меня есть стрелка, в которой строка может быть расширена.

 <TableCell>
            <IconButton
              aria-label="expand row"
              size="small"
              onClick={() => setOpen(!open)}
            >
              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
            </IconButton>
          </TableCell>
 

Изображение:

ПРАВКА 2:

Я пробую подход event.stopPropagation (). В настоящее время у меня есть это в моем onClick, который открывает диалоговое окно.

 <div className="roomIcon">
                      <RoomIcon
                        style={{ cursor: "pointer" }}
                        onClick={(e) => {
                          e.stopPropagation();
                          handleClickOpen(props, e);
                        }}
                      ></RoomIcon>
                    </div>