3 回答

TA貢獻(xiàn)1874條經(jīng)驗 獲得超12個贊
我假設(shè)您正在執(zhí)行某個循環(huán)來渲染列表組件內(nèi)的每個列表行
假設(shè)所有項目都在您循環(huán)的項目數(shù)組中:
{items.map(item => ( <ListRow handleMenuOpen={handleMenuOpen}/> <Menu handleItemDelete={handleItemDelete} item={item} />)}
現(xiàn)在在菜單容器或組件中,您將擁有該項目并將其傳遞給菜單項

TA貢獻(xiàn)1757條經(jīng)驗 獲得超7個贊
我以前也遇到過同樣的問題。我認(rèn)為你應(yīng)該處理子組件中的彈出窗口切換,就像這樣。
function Parent() {
function handleDelete(item) {
deleteFunction(item.id)
}
return (
<div>
{[].map((item, index) => {
return (
<ListRowItem key={index} handleDelete={handleDelete} item={item} />
)
})}
</div>
)
}
function ListRowItem({handleDelete, item}) {
const [isMenuOpen, setIsMenuOpen] = useState(false)
const [isModelVisible, setIsModalVisible] = useState(false)
return (
<div>
<Button onClick={isMenuOpen === true ? () => setIsMenuOpen(true) : () => setIsMenuOpen(false)} />
{isModelVisible === true ? <ModalItem /> :null}
{isMenuOpen === true ?
<div>
<MenuItem onClick={() => setIsModalVisible(true)} />
<MenuItem onClick={() => handleDelete(item.id)} />
</div>
: null}
</div>
)
}

TA貢獻(xiàn)1805條經(jīng)驗 獲得超9個贊
您可能應(yīng)該只傳遞handleMenuOpen 函數(shù)并依賴于所選元素,然后將其id 存儲在itemID 變量中。
const handleMenuOpen = (e) => {
setAnchorEl(e.currentTarget); // for menu placement
setItemID(e.currentTarget.id);
};
<MenuItem onClick={handleMenuOpen} />;
添加回答
舉報