Блог

Главная - Вопросы по программированию - Действия выпадающего списка таблицы с использованием пользовательского хука

Действия выпадающего списка таблицы с использованием пользовательского хука

#reactjs

Вопрос:

в настоящее время я пытаюсь создать пользовательский компонент таблицы, который имеет возможность добавлять столбец действий в таблицу, где пользователь может выполнять определенные действия для каждой строки. Например. Удалить / Редактировать.

Я использую этот перехват для достижения этой цели с помощью выпадающего списка: https://sparksuite.github.io/react-accessible-dropdown-menu-hook/demo /

Вот мой текущий код, который у меня есть:

 const {buttonProps, itemProps, isOpen} = useDropdownMenu(1);

rows.map((row, index) => {
    let cell;
    if (row.Actions) {
        cell = <button
            className="Table--Body-Action-Button"
            onClick={() => handleDropdownClick}>
            <div>
                <button {...buttonProps}><Icon iconName="fas fa-chevron-down"/></button>
                <div className={`Table-Dropdown-Container ${isOpen ? 'Active' : ''}`} role='menu'>
                    <a {...itemProps[0]}>Test</a>
                </div>
            </div>
        </button>
    }
})

Единственная проблема сейчас заключается в том, что когда я нажимаю на действие, оно открывает его для всех строк, которые у меня есть, но я хочу, чтобы выпадающий список отображался только в текущей строке.

Как я могу этого добиться?

Метки: