时间戳

首页 > 解决方案 > 条件css类在reactjs中的mouseOnEnter或mouseOnOver上没有改变

javascript - 条件css类在reactjs中的mouseOnEnter或mouseOnOver上没有改变

问题描述

我正在尝试在表格中显示数据，因为每一行都包含一个在鼠标悬停时应该可见的信息图标。我们可以在单击该信息图标时显示一个弹出窗口。（该信息按钮上有一个 onlclick 方法）

为此，我在下面写了一段。

<td className="reportCard">
   {filteredVehicles.map(t =>
    <tr className="cardList" onMouseEnter={() => this.onClickReportRow(t.reportId) }>
          <span className="CardReportsName"><p className="reportNameP" >{t.reportName}</p></span>
          <span style={PreviewBtn} className={this.selectedReportId == t.reportId ? "previewBtnDisplayBlock" : "previewBtnDisplayNone"}>
                 <em className="fa fa-info" aria-hidden="true" onClick={() => this.showPopUp()} />
             </span>
        </tr>
       )}
      </td>

 onClickReportRow(reportId){
        this.selectedReportId= reportId
    }

所以在这里，当我悬停在 row 上时，会调用悬停事件，但条件类没有改变。如果我使用的是 onclick 方法，并且字体中没有 onclick，那么这是有效的，否则它也不适用于 onclick。

这是一个非常奇怪的问题，不知道到底是什么问题。

提前感谢。

标签： javascriptcssreactjsreact-nativereact-redux

解决方案

问题在这里： this.selectedReportId== t.reportId

解决 this.selectedReportId 是函数还是什么？，您需要在此处进行状态以比较 repordId，以便在事件 mouseEnter 或 Leave 状态更改的值并可以应用在渲染中进行更改

链接https://codesandbox.io/s/upbeat-turing-q4jf1?file=/src/App.js:0-1827

import React, { Component } from "react";
import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";
const element = <FontAwesomeIcon icon={faCoffee} />;
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filteredVehicles: [
        {
          reportId: 1,
          reportName: "One"
        },
        {
          reportId: 2,
          reportName: "TWO"
        }
      ],
      selectedReportId: null,
      popUp: false
    };
  }
  onClickReportRow = (ID) => {
    this.setState({ selectedReportId: ID });
  };
  showPopUp = () => {
    this.setState({ popUp: !this.state.popUp });
  };
  handleonMouseLeave = () => {
    this.setState({ selectedReportId: "" });
  };
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <table>
          <td className="reportCard">
            {this.state.filteredVehicles.map((t) => (
              <tr
                className="cardList"
                onMouseEnter={() => this.onClickReportRow(t.reportId)}
                onMouseLeave={() => this.handleonMouseLeave()}
              >
                <span className="CardReportsName">
                  <p className="reportNameP">{t.reportName}</p>
                </span>
                <span
                  className={
                    this.state.selectedReportId === t.reportId
                      ? "previewBtnDisplayBlock"
                      : "previewBtnDisplayNone"
                  }
                >
                  {element}
                </span>
              </tr>
            ))}
          </td>
        </table>
        {this.state.popUp ? (
          <div
            class="modal fade"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            Required PopUp
          </div>
        ) : null}
      </div>
    );
  }
}

export default App;

推荐阅读