七爪源码:如何在 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/小程序/网站源码资源！