在本文中，我们将学习如何在 React 中轻松地从 DOM onclick 中删除元素，无论它是在列表中还是独立元素。
删除 React 中的独立元素 onclick
要删除一个独立的元素 onclick：
- 将可见性状态作为布尔值存储在状态变量中，并使用其值有条件地渲染元素。
- 将事件处理程序附加到元素的 onClick 事件。
- 在事件处理程序中，取反可见性状态的值以从 DOM 中删除元素。
一个例子应该清楚地说明这一点：
import { useState } from 'react';export default function App() {
const [visible, setVisible] = useState(true); const removeElement = () => {
setVisible((prev) => !prev);
}; return (
<div>
Click to remove element
<br />
{visible && (
<button onClick={removeElement}>Remove</button>
)}
</div>
);
}
我们使用 useState() 在组件中创建状态变量。 这个钩子返回一个包含两个变量的数组，通常称为 state 和 setState。 状态变量 (visible) 保存当前的可见性状态，setState 函数 (setVisible) 对其进行更新。
const [visible, setVisible] = useState(true);
我们给按钮的onClick事件设置了一个事件处理函数，所以当按钮被点击时，处理函数就会被调用。
<button onClick={removeElement}>Remove</button>
在处理函数中，我们使用可见性状态的 setState 函数来更新状态。
const removeElement = () => {
setVisible((prev) => !prev);
};
我们没有直接传递否定值，而是将回调函数传递给 setState 以返回否定值。 这确保我们始终获得最新的状态值。
小费
出于性能原因，React 批处理状态更改，因此在调用 setState 后状态可能不会立即更新，按照我们可能期望的顺序。 这就是为什么当根据前一个状态的数据计算新状态时，我们总是将一个函数传递给 setState。
从列表中删除元素 onclick
要在单击时从列表中删除元素：
- 将事件处理程序附加到表示列表的数组中每个元素的 onClick 事件。
- 在特定元素的事件处理程序中，调用数组的 filter() 方法，指定一个条件，该条件对于数组中的每个元素都为真，除了要删除的元素。
- 使用 setState 用 filter() 返回的结果更新状态数组。
例如：
import { useState } from 'react';export default function App() {
const [fruits, setFruits] = useState([
'Orange',
'Banana',
'Apple',
]); const removeElement = (index) => {
const newFruits = fruits.filter((_, i) => i !== index);
setFruits(newFruits);
}; return (
<div>
{fruits.map((fruit, index) => (
<div key={index}>
<button
onClick={() => removeElement(index)}
>
{fruit}
</button>
<br />
<br />
</div>
))}
</div>
);
}
使用 map() 方法，我们为数组中的每个元素渲染一个按钮。 对于每个按钮，我们附加一个将调用 removeElement() 方法的事件处理程序，将按钮所代表的元素的索引作为参数传递。
{fruits.map((fruit, index) => (
<div key={index}>
<button
onClick={() => removeElement(index)}
>
{fruit}
</button>
<br />
<br />
</div>
))}
removeElement() 通过从 filter() 回调返回一个条件来删除一个元素，该条件仅适用于数组中没有将索引传递给 removeIndex() 的元素。 这样做会从数组中排除具有该索引的元素，因此当数组状态更新时，表示该元素的按钮不再呈现。
const fruits = ['Orange', 'Banana', 'Apple'];const newFruits = fruits.filter((_, index) => index !== 1);console.log(newFruits); // [ 'Orange', 'Apple' ]
注意：不要直接在 React 中修改状态
尝试通过使用 splice() 之类的函数修改它来从数组中删除元素是行不通的：
const removeElement = (index) => {
// ⚠️ Mutating the array like this will not update the view
fruits.splice(index, 1);
};
状态在 React 中是不可变的，所以我们不能通过改变它来更新数组。 它必须替换为从 filter() 返回的新数组才能更新视图。
从列表中删除对象元素
我们还可以使用这种方法从单击列表中删除由对象表示的元素。
import { useState } from 'react';export default function App() {
const [fruits, setFruits] = useState([
{ id: 1, name: 'Orange' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Apple' },
]); const removeElement = (id) => {
const newFruits = fruits.filter(
(fruit) => fruit.id !== id
);
setFruits(newFruits);
}; return (
<div>
{fruits.map((fruit) => (
<div key={fruit.id}>
<button onClick={() => removeElement(fruit.id)}>
{fruit.name}
</button>
<br />
<br />
</div>
))}
</div>
);
}
这次我们不是按索引过滤，而是按 id 属性过滤以从数组中删除一个项目，并从 DOM 中的列表中删除该元素。
const fruits = [
{ id: 1, name: 'Orange' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Apple' },
];const newFruits = fruits.filter((fruit) => fruit.id !== 2);console.log(newFruits);
// [ { id: 1, name: 'Orange' }, { id: 3, name: 'Apple' } ]
关注七爪网，获取更多APP/小程序/网站源码资源！
