第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React:從列表項的彈出菜單中編輯和刪除

React:從列表項的彈出菜單中編輯和刪除

BIG陽 2023-12-14 15:50:02
我有一個列表容器組件,它是父組件。它映射出列表行。在列表行組件(即子組件)上,每個項目都有一個用于切換彈出菜單的按鈕,該菜單具有一個用于編輯的按鈕和一個用于刪除的按鈕。菜單本身是列表行的同級,因為如果我將其包含在列表行組件中,每一行都會呈現(xiàn)一個菜單,并且在切換時,它們都會堆疊在一起。編輯和刪除按鈕可以切換編輯表單,也可以直接刪除項目。我目前擁有的是:// Parent / Container  const [itemID, setItemID] = useState(null);  const handleMenuOpen = (id) => (e) => {    setAnchorEl(e.currentTarget); // for menu placement    setItemID(id);  };  const handleItemDelete = () => {    dispatch(deleteItem(itemID));  };<List>  <ListRow handleMenuOpen={handleMenuOpen} />  <Menu handleItemDelete={handleItemDelete}  itemID={itemID} /></List>;// List Row<Button onClick={handleMenuOpen(item.id)} />;// Menu<MenuItem onClick={() => handleModalOpen(itemID)} />;<MenuItem onClick={() => handleItemDelete()} />;編輯按鈕工作正常,但無論我如何嘗試,我都無法通過列表項上的 onClick 使 setItemID 工作。它總是以 null 的初始值出現(xiàn)。我控制臺記錄了函數(shù)參數(shù)中的 ID 正確輸出,但 setState 掛鉤不起作用。我嘗試將 useState 放在列表項上并通過 useContext 傳遞 ID,但在調(diào)用handledItemDelete 時結(jié)果未定義。我嘗試在子級上使用 ref 從父級獲取 ID,結(jié)果也是未定義的。我想不出如何使用 useEffect 來檢查 handleMenuOpen 參數(shù)的更改。我沒主意了。有人知道問題是什么以及如何解決它嗎?
查看完整描述

3 回答

?
HUWWW

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)在在菜單容器或組件中,您將擁有該項目并將其傳遞給菜單項


查看完整回答
反對 回復(fù) 2023-12-14
?
長風(fēng)秋雁

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>

    )

}


查看完整回答
反對 回復(fù) 2023-12-14
?
Cats萌萌

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} />;


查看完整回答
反對 回復(fù) 2023-12-14
  • 3 回答
  • 0 關(guān)注
  • 210 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號