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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

React:刪除沒(méi)有 id 的元素。使用狀態(tài)/設(shè)置狀態(tài)

React:刪除沒(méi)有 id 的元素。使用狀態(tài)/設(shè)置狀態(tài)

慕哥9229398 2022-11-27 16:05:15
用戶(hù)可以根據(jù)需要添加任意數(shù)量的 div。但他也可以刪除其中的一些。我不使用任何ID。我讀過(guò)一些關(guān)于刪除的主題,全部使用filter/splice,但使用 Id。沒(méi)有ID怎么可能刪除div?應(yīng)用程序.js  addDiv = () => {      this.setState({          divs: [...this.state.divs, {...}]      })  };添加新的 div 塊:<button onClick={this.addDiv}>Add New</button>分區(qū).js新的 div 塊結(jié)構(gòu):div更新:抱歉,我的錯(cuò)誤,在“行”div 中又忘記了 1 個(gè)。所以我猜是行不通的parentNode。parentElement<div className="row">  <div className="col-12">    <div>    </div>    <div>       <p></p>    </div>    <button onClick={remove()}>Remove</button> //* here remove the whole block with classname "row" */  </div>  </div>const remove = () => {   e.currentTarget.closest('.row').remove()};更新 2:e.currentTarget.parentNode.remove();工作也是如此。簡(jiǎn)單快捷。但正如我之前所寫(xiě):'row'-div 保持不變。有什么建議么?更新 3:更新刪除功能。我確實(shí)按照我的計(jì)劃工作,但如果這是一個(gè)清晰的編碼 - 不知道。不管怎么說(shuō),還是要謝謝你!
查看完整描述

3 回答

?
守著星空守著你

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超8個(gè)贊

從 DOM 中刪除 HTML 元素的第一項(xiàng)工作是找到get該元素。然后應(yīng)用刪除。

但是,在這里您可以跟蹤組件狀態(tài)下的 div。因此,簡(jiǎn)而言之,您必須有一些鍵可以唯一地指向狀態(tài)和 DOM 中的那個(gè)元素。所以,當(dāng)然,你的remove方法必須做兩個(gè)工作:

  1. 從 DOM 中找到元素,e.target.parentNode在您的情況下可以通過(guò)調(diào)用它的.remove方法將其刪除。

  2. 過(guò)濾divs對(duì)象中的state對(duì)象,以便div可以刪除

以防萬(wàn)一,您可能必須在1之前執(zhí)行2。


更新:添加了一個(gè)關(guān)于如何添加和刪除元素并在組件狀態(tài)中跟蹤它們的完整示例

我展示了如何在不修改 HTML DOM 的情況下刪除和添加元素的代碼沙盒。這一切都是關(guān)于修改React Virtual DOM(通過(guò)更新狀態(tài)并因此重新渲染),在幕后修改 HTML DOM。此外,這里元素的 JSX(我們正在添加和刪除)完全存儲(chǔ)在使其動(dòng)態(tài)可編輯的狀態(tài)中。


查看完整回答
反對(duì) 回復(fù) 2022-11-27
?
縹緲止盈

TA貢獻(xiàn)2041條經(jīng)驗(yàn) 獲得超4個(gè)贊

您可以使用parentElement而不是 id 。


在onClick處理程序方法中,您可以訪問(wèn)事件對(duì)象,該對(duì)象將包含對(duì)該按鈕(已單擊)的父對(duì)象的引用。因此遍歷 DOM,您可以獲取所需的內(nèi)容parentElement(在您的情況下,只有兩層以上應(yīng)該沒(méi)問(wèn)題),并將其從 DOM 樹(shù)中刪除。是這樣的:


function removeDiv(e) {

    e.target.parentElement.parentElement.remove();

}

另外,記得檢查瀏覽器兼容性


編輯#1


.parentElement你的情況需要額外的,我完全錯(cuò)過(guò)了。我已經(jīng)相應(yīng)地更新了我的答案。正如我所提到的,您可以繼續(xù)遍歷 DOM(這意味著您可以繼續(xù)將其鏈接到您想要的為止),只要確保您不要嘗試超出 DOM 樹(shù)的末端(= 根)即可,即,<HTML>


查看完整回答
反對(duì) 回復(fù) 2022-11-27
?
開(kāi)滿天機(jī)

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超13個(gè)贊

在 remove 函數(shù)中,我們可以訪問(wèn)事件 ( e),因此可以獲取element.parentNode按鈕 ( ) 的父元素 ( e.currentTarget) 并將其刪除:

const remove = (e) => {
   e.currentTarget.parentNode.remove();
};


查看完整回答
反對(duì) 回復(fù) 2022-11-27
  • 3 回答
  • 0 關(guān)注
  • 190 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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