ReactJS：有更好的方法吗？

Question

基本上，悬停时我正在更改 link 的文本颜色，我能够实现我需要的，但是，这对我来说看起来太多代码，我相信应该有更好的方法。我想知道是否有比这更好的逻辑。请提出建议。

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      link_su: false,
      link_si: false
    };
  }

  componentDidMount() {
    this.hover_signup = document.getElementById("signup");
    this.hover_signin = document.getElementById("signin");

    this.hover_signup.addEventListener("mouseenter", this.colorChange);
    this.hover_signup.addEventListener("mouseleave", this._colorChange);

    this.hover_signin.addEventListener("mouseenter", this.colorChange);
    this.hover_signin.addEventListener("mouseleave", this._colorChange);
  }

  componentWillUnmount() {
    //removing all event listeners.
  }

  colorChange = e => {
    if (e.target.id == "signup") {
      this.setState({ link_su: !this.state.link });
    } else {
      this.setState({ link_si: !this.state.link });
    }
  };

  _colorChange = e => {
    if (e.target.id == "signup") {
      this.setState({ link_su: this.state.link });
    } else {
      this.setState({ link_si: this.state.link });
    }
  };

  render() {
    return (
      <main role="main" className="inner cover">
        <a
          href="/signup"
          className="btn btn-lg btn-secondary"
          style={link_su ? { color: "white" } : { color: "#282c34" }}
          id="signup"
        >
          Sign Up
        </a>
        <br />
        <br />
        <a
          href="/signin"
          className="btn btn-lg btn-secondary"
          style={link_si ? { color: "white" } : { color: "#282c34" }}
          id="signin"
        >
          Sign In
        </a>
      </main>
    );
  }
}

Answer 1

是的，有一个更简单的方法，这一切都可以通过 CSS 使用 :hover 选择器来完成。

例如：

a {
  color: blue;
}

a.link1:hover {
  color: red;
}

a.link2:hover {
  color: yellow;
}

<a class="link1" href="">Link 1</a>
<a class="link2" href="">Link 2</a>

编辑:

如果您使用样式属性来应用样式，我相信没有什么（!important 属性除外）可以覆盖该样式，因此如果您通过样式提供初始颜色，但悬停颜色在一个样式表，那么悬停颜色将被初始样式覆盖并且不会显示。所以最好不要混用内联样式和样式表样式。

这是一个发生的例子：

a.link1:hover {
  color: red;
}

a.link2:hover {
  color: red !important;
}

<a class="link1" style="color: blue;" href="">Always Blue</a>
<a class="link2" style="color: blue;" href="">Using Important (but you shouldn't)</a>

注意：我真的不建议在这里使用 !important 标志，而是建议删除内嵌样式。

ReactJS：有更好的方法吗？

ReactJS: Is there a better way of doing this?

javascript

reactjs