其他分享
首页 > 其他分享> > 如何在 React 中删除元素 OnClick

如何在 React 中删除元素 OnClick

作者:互联网

如何在 React 中删除元素 OnClick

在本文中,我们将学习如何在 React 中轻松地从 DOM onclick 中删除元素,无论它是在列表中还是独立元素。

删除 React 中的独立元素 onclick

要删除独立元素 onclick:

  1. 将可见性状态存储在状态变量中作为 布尔值 值,并使用其值有条件地渲染元素。
  2. 将事件处理程序附加到 点击 元素的事件。
  3. 在事件处理程序中,取反可见性状态的值以从 DOM 中删除元素。

一个例子应该清楚地说明这一点:

 从“反应”导入 { useState }; 导出默认函数 App() {  
 const [可见,setVisible] = useState(true); 常量 removeElement = () => {  
 setVisible((prev) => !prev);  
 }; 返回 (  
 <div>  
 点击删除元素  
 <br />  
 {可见的 && (  
 <button onClick={removeElement}>消除</button>  
 )}  
 </div>  
 );  
 }

我们使用 使用状态() 在组件中创建状态变量。这个钩子返回一个包含两个变量的数组,通常称为 状态 设置状态 .这 状态 多变的 ( 可见的 ) 保持当前的可见性状态,并且 设置状态 功能 ( 设置可见 ) 更新它。

 const [可见,setVisible] = useState(true);

我们为 点击 按钮的事件,因此当单击按钮时,将调用处理函数。

 <button onClick={removeElement}>消除</button>

在处理函数中,我们使用 设置状态 可见性状态更新状态的函数。

 常量 removeElement = () => {  
 setVisible((prev) => !prev);  
 };

我们不是直接传递否定值,而是传递一个回调函数 设置状态 返回否定值。这确保我们始终获得最新的状态值。

小费

出于性能原因 React 批次状态更改,因此状态可能不会在之后立即更新 设置状态 被调用,按照我们可能期望的顺序。这就是为什么我们总是将函数传递给 设置状态 当新状态是从前一个状态的数据中计算出来的。

从列表中删除元素 onclick

要在单击时从列表中删除元素:

  1. 将事件处理程序附加到 点击 表示列表的数组中每个元素的事件。
  2. 在特定元素的事件处理程序中,调用 筛选() 数组上的方法,指定一个条件是 真的 对于数组中的每个元素,除了要删除的元素。
  3. 利用 设置状态 用返回的结果更新状态数组 筛选() .

例如:

 从“反应”导入 { useState }; 导出默认函数 App() {  
 const [水果,setFruits] = useState([  
 '橙子',  
 '香蕉',  
 '苹果',  
 ]); 常量 removeElement = (索引) => {  
 const newFruits = fruits.filter((_, i) => i !== index);  
 setFruits(新水果);  
 }; 返回 (  
 <div>  
 {fruits.map((水果,索引) => (  
 <div key={index}>  
 <button  
 onClick={() => removeElement(index)}  
 >  
 {水果}  
 </button>  
 <br />  
 <br />  
 </div>  
 ))}  
 </div>  
 );  
 }

随着 地图() 方法,我们为数组中的每个元素渲染一个按钮。对于每个按钮,我们附加一个事件处理程序,它将调用 移除元素() 方法,将按钮所代表的元素的索引作为参数传递。

 {fruits.map((水果,索引) => (  
 <div key={index}>  
 <button  
 onClick={() => removeElement(index)}  
 >  
 {水果}  
 </button>  
 <br />  
 <br />  
 </div>  
 ))}

移除元素() 通过从 筛选() 回调即 真的 仅适用于数组中没有 指数 传递给 删除索引() .这样做会排除带有那个的元素 指数 来自数组,因此当更新数组状态时,代表该元素的按钮不再呈现。

 常量水果 = ['橙色', '香蕉', '苹果']; const newFruits = fruits.filter((_, index) => index !== 1); 控制台日志(新水果); // ['橙色','苹果']

注意:不要直接在 React 中修改状态

尝试通过使用类似的函数修改它来从数组中删除元素 拼接() 不管用:

 常量 removeElement = (索引) => {  
 // ⚠️ 像这样改变数组不会更新视图  
 fruits.splice(index, 1);  
 };

状态在 React 中是不可变的,所以我们不能通过改变它来更新数组。它必须用从返回的新数组替换 筛选() 以便更新视图。

从列表中删除对象元素

我们还可以使用这种方法从单击列表中删除由对象表示的元素。

 从“反应”导入 { useState }; 导出默认函数 App() {  
 const [水果,setFruits] = useState([  
 { id:1,名称:'橙色'},  
 { id: 2, name: '香蕉' },  
 { id: 3, 名称: 'Apple' },  
 ]); 常量 removeElement = (id) => {  
 常量 newFruits = fruits.filter(  
 (水果) => fruit.id !== id  
 );  
 setFruits(新水果);  
 }; 返回 (  
 <div>  
 {fruits.map((水果) => (  
 <div key={fruit.id}>  
 <button onClick={() =>removeElement(fruit.id)}></button>  
 {水果名称}  
 </button>  
 <br />  
 <br />  
 </div>  
 ))}  
 </div>  
 );  
 }

这次我们不是按索引过滤,而是按 ID 属性从数组中删除一个项目,并从 DOM 中的列表中删除该元素。

 常量水果 = [  
 { id:1,名称:'橙色'},  
 { id: 2, name: '香蕉' },  
 { id: 3, 名称: 'Apple' },  
 ]; const newFruits = fruits.filter((fruit) => fruit.id !== 2); 控制台日志(新水果);  
 // [ { id: 1, name: 'Orange' }, { id: 3, name: 'Apple' } ]

最初发表于 编码beautydev.com

JavaScript 所做的每一件疯狂的事

关于 JavaScript 的细微警告和鲜为人知的部分的迷人指南。

注册 并立即获得免费副本。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/23052/23110913

标签:状态,水果,数组,删除,元素,React,OnClick,id
来源: https://www.cnblogs.com/amboke/p/16672520.html