React新手求助：实现Material UI带删除图标按钮的单独隐藏功能

嘿，作为React新手遇到这个问题太正常啦！咱们直接用状态来跟踪每个按钮的可见性就能轻松搞定，下面给你两种常见场景的解决方案：

固定数量按钮的场景 #

如果你的按钮是固定几个，用数组来跟踪每个按钮的可见状态就很方便：

import React, { useState } from "react";
import Button from "@material-ui/core/Button";
import DeleteIcon from "@material-ui/icons/Delete";

export default function App() {
  // 用数组存储每个按钮的可见状态，初始都为true（可见）
  const [visibleButtons, setVisibleButtons] = useState([true, true, true]);

  // 点击删除按钮时，更新对应索引的按钮状态为隐藏
  const handleDelete = (buttonIndex) => {
    // 一定要复制原数组，不能直接修改状态哦！
    const updatedVisibility = [...visibleButtons];
    updatedVisibility[buttonIndex] = false;
    setVisibleButtons(updatedVisibility);
  };

  return (
    <div className="App">
      {/* 遍历状态数组，只渲染可见的按钮 */}
      {visibleButtons.map((isVisible, index) => (
        isVisible && (
          <Button
            key={index}
            variant="contained"
            color="secondary"
            startIcon={<DeleteIcon />}
            onClick={() => handleDelete(index)}
            style={{ margin: "0 10px 10px 0" }}
          >
            删除按钮 {index + 1}
          </Button>
        )
      ))}
    </div>
  );
}

代码解释： #

• visibleButtons数组里的每一项对应一个按钮的可见状态，true代表显示，false代表隐藏。
• 点击按钮时，handleDelete会找到对应按钮的索引，把数组里的对应项改成false，React会自动重新渲染，隐藏那个按钮。
• 渲染时用isVisible && <Button ...>的条件渲染逻辑，只有状态为true的按钮才会出现在页面上。

动态生成按钮的场景（比如从接口获取数据） #

如果你的按钮是动态生成的，用唯一ID来跟踪状态会更可靠（避免索引变化导致的错误）：

import React, { useState } from "react";
import Button from "@material-ui/core/Button";
import DeleteIcon from "@material-ui/icons/Delete";

export default function App() {
  // 假设这是从接口拿到的按钮数据，每个按钮有唯一id
  const buttonList = [
    { id: "user-btn-1", label: "用户按钮1" },
    { id: "user-btn-2", label: "用户按钮2" },
    { id: "user-btn-3", label: "用户按钮3" }
  ];

  // 用对象存储每个按钮的可见状态，键是按钮id，值是可见性
  const [visibleButtons, setVisibleButtons] = useState(() => {
    return buttonList.reduce((acc, btn) => {
      acc[btn.id] = true;
      return acc;
    }, {});
  });

  // 点击时根据按钮id更新状态
  const handleDelete = (buttonId) => {
    setVisibleButtons(prevState => ({
      ...prevState,
      [buttonId]: false
    }));
  };

  return (
    <div className="App">
      {buttonList.map((btn) => (
        visibleButtons[btn.id] && (
          <Button
            key={btn.id}
            variant="contained"
            color="secondary"
            startIcon={<DeleteIcon />}
            onClick={() => handleDelete(btn.id)}
            style={{ margin: "0 10px 10px 0" }}
          >
            删除{btn.label}
          </Button>
        )
      ))}
    </div>
  );
}

核心思路： #

不管是固定还是动态按钮，核心都是给每个按钮分配唯一标识，用状态单独跟踪每个按钮的可见性，点击时只更新当前按钮的状态，这样就能实现点击哪个就隐藏哪个，其他按钮完全不受影响啦！

内容的提问来源于stack exchange，提问作者Bilawal Wajid Ali