Question

问题是我试图根据具有条件重现的状态来隐藏和显示元素，但是它不起作用。

我已经设置了元素的状态并在onmouseover和onmouse离开事件中的方法首次传递给该元素时，当我对第二个元素重复相同的过程而无法使用时，传递了该方法。

QString log;
for(int i=0;i<argc;i++){
    log+= argv[i];
    log+="\n";
}

QFile logFile("log.ini");
if(logFile.open(QIODevice::Append|QIODevice::Text)){
    QTextStream outLog(&logFile);
    outLog<<log;
}
logFile.close();

Answer 1

无需为onMouseEnter和onMouseLeave创建两个单独的函数。您可以为两个事件侦听器使用一个功能。

只需创建两个函数，每个要切换的状态值一个。在下面的代码中，我们将使用handleSwitch和handleOpti。

查看有效的沙箱：https://codesandbox.io/s/naughty-cookies-4mcwt

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      opticare: false
    };

  }

  handleSwitch = () => {
    this.setState({
      show: !this.state.show
    });
  };

  handleOpti = () => {
    this.setState({
      opticare: !this.state.opticare
    });
  };

  render() {
    let className = "reading-friends";
    if (this.state.show) {
      className = "reading-friends visible";
    } else if (!this.state.show) {
      className = "reading-friends invisible";
    }

    let addClass = "opti-care";
    if (this.state.opticare) {
      addClass = "opti-care visible";
    } else if (!this.state.opticare) {
      addClass = "opti-care invisible";
    }

    return (
      <div>
        <div>
          <div className="row ">
            <div className="row ">
              <div className={className} style={{ textAlign: "center" }}>
                <h1
                  className="heading"
                  style={{
                    fontSize: "50px",
                    fontWeight: "bold",
                    marginTop: "140px",
                    marginBottom: "200px",
                    fontFamily: "catamaran,sans-serif"
                  }}
                >
                  Reading Friends
                </h1>
                <p className="parah">
                  Reading Friends is designed to engage young children by
                  promoting interactive learning through games, puzzles,
                  <br />
                  and music. Appealing to children's instinctual
                  inquisitiveness, Reading Friends brings education to life with
                  exciting graphics,
                  <br />
                  spirited sound and creative activities that help them learn to
                  read, while entertaining them through play.
                </p>
              </div>
            </div>
          </div>
          <div className="row d-flex justify-content-center">
            <div style={{ textAlign: "center" }} className={addClass}>
              <h1
                style={{
                  fontSize: "50px",
                  fontWeight: "bold",
                  marginBottom: "200px",
                  fontFamily: "catamaran,sans-serif"
                }}
              >
                Opticare Solution
              </h1>
              <p>
                OptiCare Solution is a complete mini ERP for opticians and
                optometrists.
                <br />
                We are the first to bring such an extensive solution in the
                field of Optometry,
                <br />
                providing features that are robust and easy to use.
              </p>
            </div>
          </div>
          <div className="row" />
        </div>
        <div style={{ marginTop: "270px" }} className="row ">
          <div className="col-lg-3 col-sm-3 col-3 d-flex justify-content-center">
            <a href="https://play.google.com/store/apps/details?id=com.planetreading.readingfriends">
              <img
                onMouseOut={this.handleSwitch}
                onMouseOver={this.handleSwitch}
                src="http://newstate.io/wp-content/uploads/2019/07/work-reading-friends-colored.png"
                alt=""
                class="we-do-img we-work-img img-responsive grayscale"
              />
            </a>
          </div>
          <div className="col-lg-3 col-sm-3 col-3 d-flex justify-content-center">
            <img
              onMouseOut={this.handleOpti}
              onMouseOver={this.handleOpti}
              src="http://newstate.io/wp-content/uploads/2019/07/work-opticare-colored.png"
              alt=""
              class="we-do-img we-work-img img-responsive grayscale"
            />
          </div>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

在leave和handleSwitch函数中，您正在使用状态的switch属性而不是show属性。另外，如果使用箭头功能，则无需使用bind。

我正在尝试隐藏和显示基于状态的元素，但无法正常工作？

2 个答案: