Как использовать меню Material-UI внутри mui-datatable в обработчике событий - PullRequest
Новая
       125

Как использовать меню Material-UI внутри mui-datatable в обработчике событий

0 голосов
/ 06 марта 2020

Я пытаюсь заставить действие openFilePreviewDialog(id) вернуть id своей строки.

Проблема : он возвращает неправильный идентификатор, вместо того, чтобы возвращать id = 7, он возвращает 8 

[
  {
    name: "id",
    label: " ",
    options: {
      filter: true,
      sort: false,
      customBodyRender: id => {
        const options = ["View", "Signature", "Download", "Share", "Delete"];

        return (
          <div>
            <IconButton
              className={classes.iconButton}
              aria-label="more"
              aria-controls="long-menu"
              aria-haspopup="true"
              onClick={handleClick}
            >
              <MoreVertRounded />
            </IconButton>
            <Menu
              id="long-menu"
              anchorEl={anchorEl}
              keepMounted
              open={open}
              onClose={handleClose}
            >
              {options.map(option => (
                <MenuItem
                  key={option}
                  onClick={() => openFilePreviewDialog(id)}
                >
                  {option}
                </MenuItem>
              ))}
            </Menu>
          </div>
        );
      }
    }
  }
];

1 Ответ

0 голосов
/ 27 марта 2020

MUIDatatable всегда получает последнее значение в поле id , не имеет значения, по какому индексу вы щелкнули. Возможно, это ошибка в MUIDatatable. Но я найду альтернативное решение для вас. Вам нужно обработать onRowClick, как показано ниже: 

const options = {
    filterType: 'dropdown',
    responsive: 'scrollFullHeight',
    serverSide: true,
    count: total,
    page: page,
    searchText: tableState.options.searchText,
    onRowClick: handleRowClick
}

Затем вы сохраняете Id, используя следующий код (services - это набор данных, который заполняется в MUIDatatable). Я использовал UseState для хранения идентификатора: 

const [serviceId, setServiceId] = useState(0);

const handleRowClick = (rowData, rowMeta) => {
    setServiceId(services[rowMeta.dataIndex].id);
};

Тогда в вашей функции openFilePreviewDialog вы можете использовать этот идентификатор: 

function openFilePreviewDialog(id) {
    console.log(serviceId, 'serviceRequestId');
}
...