如何在React中通过map函数实现点击单个项时设置其边框颜色

实现方案 #

步骤1：替换全局状态 #

你当前使用的布尔类型全局状态openDes会控制所有卡片同步响应，首先替换为存储当前选中卡片索引的状态：

// 替换原有 const [openDes, setDes] = useState(false) 代码
const [selectedCardIndex, setSelectedCardIndex] = useState(null);

步骤2：修改遍历渲染逻辑 #

在map遍历中新增选中状态判断，给对应被选中的卡片加边框，同时控制单个卡片的展开收起：

{faqData.map((item, index) => {
  // 判断当前卡片是否被选中
  const isSelected = selectedCardIndex === index;
  return (
    // 最外层容器加点击事件和边框样式
    <SimpleFlexContainer
      sx={{ 
        flexDirection: "column", 
        m: "20px 0px",
        // 选中时显示指定颜色边框，可自行修改颜色值
        border: isSelected ? "2px solid #165DFF" : "none",
        borderRadius: "4px",
        overflow: "hidden"
      }}
      // 点击当前卡片时切换选中状态
      onClick={() => setSelectedCardIndex(isSelected ? null : index)}
    >
      <SimpleFlexContainer
        sx={{
          background: "#F4F4F5",
          width: "100%",
          p: "15px 25px",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <SimpleFlexContainer>
          <SmallTypo
            sx={{ fontWeight: "bold", mr: { xs: "15px", md: "25px" } }}
          >
            Question
          </SmallTypo>
          <SmallTypo sx={{ fontWeight: "bold" }}>{item.q}</SmallTypo>
        </SimpleFlexContainer>
        <Box>
          <IconButton>
            {isSelected ? (
              <RemoveIcon />
            ) : (
              <AddIcon />
            )}
          </IconButton>
        </Box>
      </SimpleFlexContainer>
      <Box
        sx={{
          display: isSelected ? "inherit" : "none",
          background: "white",
          p: "26px",
          border: "1px solid #F4F4F5",
        }}
      >
        <SmallTypo>{item.a}</SmallTypo>
      </Box>
    </SimpleFlexContainer>
  );
})}

额外说明 #

如果你只需要点击右侧图标才触发选中和展开，把onClick事件从最外层容器移到IconButton组件上即可。边框的颜色、粗细、圆角都可以根据需求自行修改sx里的对应属性。

内容的提问来源于stack exchange，提问作者Anwar Hossain