亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

React:刪除沒有 id 的元素。使用狀態/設置狀態

React:刪除沒有 id 的元素。使用狀態/設置狀態

慕哥9229398 2022-11-27 16:05:15
用戶可以根據需要添加任意數量的 div。但他也可以刪除其中的一些。我不使用任何ID。我讀過一些關于刪除的主題,全部使用filter/splice,但使用 Id。沒有ID怎么可能刪除div?應用程序.js  addDiv = () => {      this.setState({          divs: [...this.state.divs, {...}]      })  };添加新的 div 塊:<button onClick={this.addDiv}>Add New</button>分區.js新的 div 塊結構:div更新:抱歉,我的錯誤,在“行”div 中又忘記了 1 個。所以我猜是行不通的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();工作也是如此。簡單快捷。但正如我之前所寫:'row'-div 保持不變。有什么建議么?更新 3:更新刪除功能。我確實按照我的計劃工作,但如果這是一個清晰的編碼 - 不知道。不管怎么說,還是要謝謝你!
查看完整描述

3 回答

?
守著星空守著你

TA貢獻1799條經驗 獲得超8個贊

從 DOM 中刪除 HTML 元素的第一項工作是找到get該元素。然后應用刪除。

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

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

  2. 過濾divs對象中的state對象,以便div可以刪除

以防萬一,您可能必須在1之前執行2


更新:添加了一個關于如何添加和刪除元素并在組件狀態中跟蹤它們的完整示例

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


查看完整回答
反對 回復 2022-11-27
?
縹緲止盈

TA貢獻2041條經驗 獲得超4個贊

您可以使用parentElement而不是 id 。


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


function removeDiv(e) {

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

}

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


編輯#1


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


查看完整回答
反對 回復 2022-11-27
?
開滿天機

TA貢獻1786條經驗 獲得超13個贊

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

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


查看完整回答
反對 回復 2022-11-27
  • 3 回答
  • 0 關注
  • 191 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號