Пустое состояние из функции-обработчика в React (с таблицами данных) - PullRequest
Новая
       4

Пустое состояние из функции-обработчика в React (с таблицами данных)

0 голосов
/ 05 мая 2020

Я использую datatables. net плагин с React. Я создаю кнопку в последнем столбце каждой строки, используя следующий параметр в columnDefs таблиц данных: 

            {
            "targets": [10],
            createdCell: (td, cellData, rowData, row, col) => {
                ReactDOM.render(
                        <button onClick={props.handleReportClick}></button>
                    , td);
                }
            })

На моей странице реакции у меня есть следующее: 

const handleReportClick = (e) =>{
    e.stopPropagation();
    console.log(dataTable);
};

console.log выше дает мне пустую строку (на странице есть перехватчик [dataTable, setDataTable], который имеет значения сразу после инициирования datatable), и то же самое происходит со всеми другими значениями перехватчика на этой странице. Все остальные обработчики событий на странице console.log (dataTable) как объект и могут получить доступ ко всем состояниям, но не к этому.

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 10 мая 2020

Я обнаружил, что передача ссылки на функцию-обработчик кнопке (как в моем примере выше) доставляла мне всевозможные проблемы с функцией-обработчиком, ссылающейся на неправильные экземпляры визуализации. Вместо этого я предоставил каждой кнопке уникальный идентификатор данных (в моем случае было достаточно строки, так как у меня была только одна кнопка в строке), а затем создал ловушку useEventListener, чтобы добавить прослушиватель событий ко всем щелчкам на странице. Я также добавил функцию ниже, чтобы получить идентификатор данных кнопки, которая была нажата, поскольку прослушиватель событий был ненадежным и выдавал дочерние элементы в качестве целей. Ниже работает хорошо и каждый раз фиксирует идентификатор данных. Таким образом, состояние, к которому я обращаюсь для dataTable, правильное, и я могу захватить информацию из соответствующей строки datatable и обработать ее. 

export default function getSelectedRow(e) {
    let parent = e.target;
    let selectedRow;
    while (parent) {
        if (parent.getAttribute('data-id')) {
            selectedRow = parent.getAttribute('data-id');
        }
        parent = parent.parentElement;
    }
    return selectedRow;
}
...