React中如何通过JavaScript关联按钮至对应<li>并实现删除

嘿，我来帮你捋捋怎么实现这个需求～ 在React应用里，我们优先推荐用状态驱动视图的方式来处理这种操作，当然也可以用原生JS直接操作DOM（不过不建议在React里这么干），下面给你两种方案：

方案一：React状态驱动（推荐） #

这是React的标准做法，通过维护列表数据的状态，点击按钮时更新状态，让React自动重新渲染列表。

代码示例 #

import { useState } from 'react';

function TodoList() {
  // 用状态存储列表数据，给每个项加唯一id（比索引更可靠）
  const [listItems, setListItems] = useState([
    { id: 1, content: 'Item 1' },
    { id: 2, content: 'Item 2' },
    { id: 3, content: 'Item 3' }
  ]);

  // 删除指定项的函数
  const handleDeleteItem = (itemId) => {
    // 过滤掉要删除的项，更新状态
    setListItems(prevItems => prevItems.filter(item => item.id !== itemId));
  };

  return (
    <ul>
      {listItems.map(item => (
        <li key={item.id}>
          {item.content}
          {/* 点击按钮时传入当前项的id，关联到对应的列表项 */}
          <button onClick={() => handleDeleteItem(item.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

export default TodoList;

关键说明 #

• 每个列表项都有唯一的id，用来精准定位要删除的项（避免用索引，因为列表顺序变化时索引会失效）
• 点击按钮时，把当前项的id传递给删除函数，通过filter方法从状态中移除该项
• React会根据更新后的状态自动重新渲染列表，不需要手动操作DOM

方案二：原生JS操作DOM（不推荐） #

如果一定要用纯JS直接操作DOM，可以利用事件委托和DOM API来实现，但这种方法会破坏React的数据流，可能导致状态和视图不一致，仅作了解：

代码示例 #

function TodoList() {
  // 给父元素ul绑定点击事件（事件委托）
  const handleDelete = (e) => {
    // 判断点击的元素是不是Delete按钮
    if (e.target.tagName === 'BUTTON' && e.target.textContent.trim() === 'Delete') {
      // 找到按钮所在的最近<li>元素
      const targetLi = e.target.closest('li');
      if (targetLi) {
        // 从DOM中移除这个<li>
        targetLi.remove();
      }
    }
  };

  return (
    <ul onClick={handleDelete}>
      <li> Item 1 <button> Delete </button> </li>
      <li> Item 2 <button> Delete </button> </li>
      <li> Item 3 <button> Delete </button> </li>
    </ul>
  );
}

export default TodoList;

关键说明 #

• 利用事件委托，只给父元素ul绑定一个点击事件，不用给每个按钮单独绑定，性能更好
• 通过e.target获取点击的元素，用closest('li')快速找到对应的列表项
• 直接调用remove()删除DOM元素，但这种方式不会更新React的状态，后续如果有状态更新，被删除的项可能会重新出现

内容的提问来源于stack exchange，提问作者Kevin Chandra