React中实现鼠标悬停时高亮所有同spanid的按钮方案

核心思路 #

通过React组件状态跟踪当前悬停的spanid，动态为所有匹配该spanid的按钮添加高亮样式，无spanid的按钮不受状态影响。

修改步骤及代码 #

1. 调整CSS样式 #

新增独立的高亮类，替代原有的:hover伪类（确保状态控制的样式优先级）：

.example_c {
  color: #494949 !important;
  text-transform: uppercase;
  text-decoration: none;
  background: #ffffff;
  padding: 10px;
  border: 2px solid #494949 !important;
  display: inline-block;
  transition: all 0.4s ease 0s;
  margin-left:10px;
  margin-top:10px;
  width:120px;
}

/* 新增高亮类，用于状态控制 */
.example_c.highlight {
  background: #556bce;
  color: white !important;
}

.example_d {
  color: #494949 !important;
  text-transform: uppercase;
  text-decoration: none;
  background: #ffffff;
  padding: 10px;
  border: 2px solid #494949 !important;
  display: inline-block;
  transition: all 0.4s ease 0s;
  margin-left:10px;
  margin-top:10px;
  width:120px;
}

2. 修改React组件逻辑 #

添加状态管理鼠标悬停的spanid，动态控制按钮样式：

import React from 'react';
import './App.css';
import Records from "./records.json";

class Relation extends React.Component {
  // 初始化状态，跟踪当前悬停的spanid
  state = {
    currentHoverSpanId: null
  };

  // 鼠标进入时更新状态为当前按钮的spanid
  handleMouseEnter = (spanid) => {
    this.setState({ currentHoverSpanId: spanid });
  };

  // 鼠标离开时重置状态
  handleMouseLeave = () => {
    this.setState({ currentHoverSpanId: null });
  };

  render () {
    const { currentHoverSpanId } = this.state;
    const tokens_to_render = [];
    const input_tokens = Records;
    let cntr = 0;

    input_tokens.forEach(tk => {
      const spanid = tk['spanid'];
      if (!spanid) {
        tokens_to_render.push(
          <button 
            key={cntr} 
            className='example_d'
          > 
            {tk['token_text']} 
          </button>
        );
      } else {
        // 动态判断是否添加高亮类
        const btnClass = currentHoverSpanId === spanid 
          ? 'example_c highlight' 
          : 'example_c';

        tokens_to_render.push(
          <button 
            key={cntr} 
            className={btnClass}
            onMouseEnter={() => this.handleMouseEnter(spanid)}
            onMouseLeave={this.handleMouseLeave}
          > 
            {tk['token_text']} 
          </button>
        );
      }
      cntr++;
    });
  
    return (
      <div className="control-box">
        {tokens_to_render}
      </div>
    )
  }
}

export default Relation;

关键说明 #

• 用currentHoverSpanId状态存储当前悬停的spanid，鼠标进入按钮时设置对应值，离开时清空。
• 有spanid的按钮会根据状态判断是否添加highlight类，实现同spanid组的批量高亮。
• 无spanid的按钮始终使用example_d类，完全不受悬停状态影响。

内容的提问来源于stack exchange，提问作者Priyankar Bose