如何在 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