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