使用 Reactjs 将样式悬停在映射数组上答案

【问题标题】：Style hover on mapped array using Reactjs使用 Reactjs 将样式悬停在映射数组上
【发布时间】：2022-01-18 20:20:30
【问题描述】：

我试图在悬停时设置ListItem 的样式，但问题是列表被映射以创建多个列表项。当我更改悬停样式时，它会更改悬停时所有列表项的样式。如何只针对一个元素？下面是代码。当prop.icon 和ListItemText 悬停时，我正在尝试设置它们的样式。

Sidebar.js

var links = (
    <List className={classes.list}>
      {routes.map((prop, key) => {
    

        if (prop.path === "/login") {
          return;
          
        }

        return (
          <NavLink
            to={prop.layout + prop.path}
            className={classes.item}
            activeClassName="active"
            key={key}
          >
            
            <ListItem button className={classes.itemLink} onMouseEnter={MouseEnter} onMouseLeave={MouseLeave}>
            <prop.icon
                className={classNames(classes.itemIcon)}
              />
             
              <ListItemText
                primary={prop.name}
                className={classNames(classes.itemText)}
                disableTypography={true}
              />
            </ListItem>
          </NavLink>
        );
      })}
    </List>
  );

MouseEnter & MouseLeave

  const MouseEnter = (e) => {
    
    setHovered(true);
  }
  const MouseLeave = (e) => {
    setHovered(false);
  }

【问题讨论】：

请发布 MouseEnter 和 mouseLeave 函数
你为什么不用css来做这个？
css 会是什么样子？ IDK 当我需要定位映射数组中的一个元素时，CSS 将如何工作。
@AS10 在 CSS 中你只需要使用 :hover 来引用。它将与您尝试使用 JS 实现的所有功能相同，但更简单。
@AS10 请接受答案以关闭此问题

标签： javascript css reactjs material-ui

【解决方案1】：

使用 CSS 就这么简单：

.list-item:hover{
  background-color: purple;
  color: white;
}



/* just for decoration, you don't need the code below*/

ul{
  list-style-type: none;
}

li{
  padding: 1rem;
  cursor: pointer;
  border: solid 1px black;
  margin: 0.5rem;
}

<script src="https://kit.fontawesome.com/a076d05399.js"></script>


<ul >
  <li class="list-item" >
      <span  >&#9824; </span>spades
  </li>
  <li class="list-item">
      <span  >&#9827; </span>clubs
  </li>
  <li class="list-item">
      <span  >&#9830; </span>dimonds
  </li>
</ul>

或使用您的代码：

//links.css
.list-item:hover{
  background-color:red;
}

//links.js
import "./links.css"

var links = (
    <List className={classes.list}>
      {routes.map((prop, key) => {


        if (prop.path === "/login") {
          return;

        }

        return (
            <NavLink
                to={prop.layout + prop.path}
                className={classes.item}
                activeClassName="active"
                key={key}
            >

              <ListItem button className={classes.itemLink + " list-item"} onMouseEnter={MouseEnter} onMouseLeave={MouseLeave}>
                <prop.icon
                    className={classNames(classes.itemIcon)}
                />

                <ListItemText
                    primary={prop.name}
                    className={classNames(classes.itemText)}
                    disableTypography={true}
                />
              </ListItem>
            </NavLink>
        );
      })}
    </List>
);

【讨论】：

我很欣赏代码，但这不起作用。 listItem 的背景应该是紫色，而 icon 和 listItemText 在悬停时应该是白色的。问题是这是一个映射数组，所以如果我将悬停颜色应用于 prop.icon 每当我悬停任何图标时，它会将颜色更改为我设置悬停颜色的颜色。
@AS10 当然你必须详细说明它。我只是想演示基本概念。向您想要设置样式的元素添加一个类，然后使用:hover 伪选择器对其进行样式设置。如果您需要一个详细的示例，请提供一个代码框。现在我不知道你的图标是什么。但是我稍微调整了我的示例以适应您的评论。

【解决方案2】：

除了使用布尔值之外，使用数组中的活动索引对我有用。 sidebar.js

 const [hovered, setHovered] = useState(-1);

  const MouseEnter = (index) => {
    setHovered(index);
  }
  const MouseLeave = () => {
    setHovered(-1);
  }
  
  
  var links = (
    <List className={classes.list}>
      {routes.map((prop, index, key ) => {
    

        if (prop.path === "/login") {
          return;
          
        }

        return (
          <NavLink
            to={prop.layout + prop.path}
            className={classes.item}
            activeClassName="active"
            key={key}
          >
            
            <ListItem button className={hovered === index ? 'hoverLinear' : classes.itemContainer} onMouseEnter={() => MouseEnter(index)} onMouseLeave={MouseLeave}>
            <prop.icon
              
                className={classNames(classes.itemIcon)}
                 style={hovered === index ? {color: 'white'} : {color: "#8B2CF5"}}
              />
              <ListItemText
                primary={prop.name}
                className={classNames(classes.itemText, ' mx-10')}
                style={hovered === index ? {color: 'white'} : {color: "#3A448E"}}
                disableTypography={true}
              />
            </ListItem>
          </NavLink>
        );
      })}
    </List>
  );

【讨论】：