七爪源码：如何在 React 中删除元素 OnClick

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

删除 React 中的独立元素 onclick

要删除一个独立的元素 onclick：

1. 将可见性状态作为布尔值存储在状态变量中，并使用其值有条件地渲染元素。
2. 将事件处理程序附加到元素的 onClick 事件。
3. 在事件处理程序中，取反可见性状态的值以从 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

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

1. 将事件处理程序附加到表示列表的数组中每个元素的 onClick 事件。
2. 在特定元素的事件处理程序中，调用数组的 filter() 方法，指定一个条件，该条件对于数组中的每个元素都为真，除了要删除的元素。
3. 使用 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/小程序/网站源码资源！