如何在点击地图功能时为单个项目设置边框颜色？

Question

我有一个包含一些数据的数组。我的阵列是，

const faqData = [
    {
      q: "How Can We Help You?",
      a: "Below are answers to our most commonly asked questions. If you cannot find an answer here, please contact us.",
    },
    {
      q: "How Can We Help You?",
      a: "Below are answers to our most commonly asked questions. If you cannot find an answer here, please contact us.",
    },
    {
      q: "How Can We Help You?",
      a: "Below are answers to our most commonly asked questions. If you cannot find an answer here, please contact us.",
    },
  ];

为了显示卡片中数组的所有数据，我使用了 map 函数，

 {faqData.map((item, index) => {
          return (
            <SimpleFlexContainer
              sx={{ flexDirection: "column", m: "20px 0px" }}
            >
              <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>
                    {openDes ? (
                      <RemoveIcon onClick={() => setDes(false)} />
                    ) : (
                      <AddIcon onClick={() => setDes(true)} />
                    )}
                  </IconButton>
                </Box>
              </SimpleFlexContainer>
              <Box
                sx={{
                  display: openDes ? "inherit" : "none",
                  background: "white",
                  p: "26px",
                  border: "1px solid #F4F4F5",
                }}
              >
                <SmallTypo>{item.a}</SmallTypo>
              </Box>
            </SimpleFlexContainer>
          );
        })}

当用户单击各个卡片时，我想在该特定卡片周围显示边框颜色。如何实现？

Answer 1

最好的解决方案是创建一个单独的组件。像这样：

import { useState } from 'React';

const FAQComponent = (props) => {
 const {
  item,
 } = props;
 
 const [active, setActive] = useState(false);
 const [openDes, setDes] = useState(false);

 return (
           <SimpleFlexContainer
              sx={{ flexDirection: "column", m: "20px 0px" }}
              onClick={() => setActive(pre => !pre)}
            >
              <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>
                    {openDes ? (
                      <RemoveIcon onClick={() => setDes(false)} />
                    ) : (
                      <AddIcon onClick={() => setDes(true)} />
                    )}
                  </IconButton>
                </Box>
              </SimpleFlexContainer>
              <Box
                sx={{
                  display: openDes ? "inherit" : "none",
                  background: "white",
                  p: "26px",
                  border: "1px solid #F4F4F5",
                }}
              >
                <SmallTypo>{item.a}</SmallTypo>
              </Box>
            </SimpleFlexContainer>
 )
}

现在您可以将您的组件映射到其他地方：

 {faqData.map((item, index) => <FAQComponent key={item.a} item={item} />)}

注意：React 在映射组件上放置 key 参数非常重要，您可以使用项目对象中唯一的任何其他字段。

然后，使用active常量来确定是否应该更改边框。

Answer 2

使用状态来保存被点击的项目的索引

const [clicked, setClicked] = React.useState('')

然后，您可以在其中一个外部 SimpleFlexContainer 中使用样式

sx={{borderColor: clicked === index ? 'your_favourite_color': ''}}

并且不要忘记在外部单击时删除索引值，或者如果您不介意则保留它。

如何在点击地图功能时为单个项目设置边框颜色？

How to set border color on individual items on click by map functions?

javascript

reactjs

material-ui

react-redux

react-hooks