В настоящее время у меня есть 3 строки в таблице. В каждой строке два столбца: имя файла и кнопка
Мои требования следующие:
- Нажмите кнопку, и она переключит меню. то есть, если предыдущий он близок, он должен быть открытым. Если prev открыт, закройте.
- Когда вы нажимаете на эту кнопку, если открыты другие меню, они должны быть закрыты.
- Каждый раз, когда открыто только 1 меню.
github link
git clone, npm install, npm start
У меня следующий код
import React, {useState, useEffect} from 'react';
function Menu({buttonName, menuIndex, currRowInd, setCurrRowInd}) {
// inside menu
const [open, setOpen] = useState(false);
const [showMenu, setShowMenu] = useState(false);
const menuItems = {download: 'download', view: 'view', delete: 'delete'};
useEffect(() => {
if (open && menuIndex === currRowInd) {
setShowMenu(true);
} else {
setShowMenu(false);
}
}, [open, currRowInd]);
return (
<div>
<button
onClick={event => {
// it is mouse click
if (event.pageX !== 0 && event.pageY !== 0) {
// toggle
setOpen(!open);
setCurrRowInd(menuIndex);
}
}}
>
{buttonName}
</button>
{showMenu && (
<ul style={{padding: '5px', margin: '10px', border: '1px solid #ccc'}}>
{Object.keys(menuItems).map((item, itemIndex) => {
return (
<li
tabIndex="0"
key={itemIndex}
style={{
listStyle: 'none',
padding: '5px',
backgroundColor: 'blue'
}}
>
{item}
</li>
);
})}
</ul>
)}
</div>
);
}
function TableElement() {
const [currRowInd, setCurrRowInd] = useState('');
const items = [
{
file: 'file1',
button: 'button1'
},
{
file: 'file2',
button: 'button2'
},
{
file: 'file3',
button: 'button3'
}
];
return (
<table style={{borderCollapse: 'collapse', border: '1px solid black'}}>
<tbody>
{items.map((item, index) => {
return (
<tr key={index}>
<td style={{border: '1px solid black'}}>
<a href="#">{item.file}</a>
</td>
<td style={{border: '1px solid black'}}>
<Menu
buttonName={item.button}
menuIndex={index}
currRowInd={currRowInd}
setCurrRowInd={setCurrRowInd}
/>
</td>
</tr>
);
})}
</tbody>
</table>
);
}
function App() {
return (
<>
<TableElement />
</>
);
}
export default App;
У меня ошибка:
- Нажмите кнопку 1, откроется 1-е меню (хорошо)
- Нажмите кнопку 2, откроется 2-е меню и закроется 1-е меню (хорошо)
- Нажмите кнопку 1 еще раз, 2-е меню закрыто (пока хорошо), но 1-е меню не открыто.
Есть идеи?