Question

我有 6 个按钮，当我单击它们时，样式会发生变化。但是，它不能正常工作。我认为这是由于我的状态控制器，但我无法解决问题。我现在就一一描述。

class NavSec2 extends React.Component {
  state = {
    controller: "",
  };

  clickHandler(e) {
    this.props.actions.buttonActive();

    this.setState({ controller: e.target.className });
  }

  render() {
    const { isActive } = this.props.navState;
    const { controller } = this.state;
    return (
      <div className="menu-buttons">
        <button
          onClick={(e) => this.clickHandler(e)}
          className={controller === "fas fa-home" && isActive ? "active" : ""}
        >
          <i className="fas fa-home"></i>
        </button>

        <button
          onClick={(e) => this.clickHandler(e)}
          className={
            controller === "far fa-play-circle" && isActive ? "active" : ""
          }
        >
          <i className="far fa-play-circle"></i>
        </button>

        <button
          onClick={(e) => this.clickHandler(e)}
          className={controller === "fas fa-store" && isActive ? "active" : ""}
        >
          <i className="fas fa-store"></i>
        </button>

        <button
          onClick={(e) => this.clickHandler(e)}
          className={controller === "fas fa-users" && isActive ? "active" : ""}
        >
          <i className="fas fa-users"></i>
        </button>

        <button
          onClick={(e) => this.clickHandler(e)}
          className={
            controller === "fas fa-gamepad" && isActive ? "active" : ""
          }
        >
          <i className="fas fa-gamepad"></i>
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <NavSec2 navState={{}} actions={{ buttonActive: () => {}}} />,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

当我单击一个按钮时，控制器状态采用图标的 className（fa-home 等）的值。我对我的按钮说，如果控制器状态有你的图标的 className，并且 isActive 初始状态（我在 Redux 中写的，我没有问题）是真的，你将添加一个名为“active”的类给自己。

它们都发生了。控制器状态改变，初始状态变为真。当我单击一个按钮时，它会改变颜色。但是，我意识到有时我的控制器状态不会改变。我不知道为什么。我该怎么办？

Answer 1

发生这种情况是因为点击 <i></i> 时 <button> 并不总是有针对性。

当不小心点击 <button> 时，e.target.className 没有价值

你可以用css <i>覆盖整个<button>区域来操作它，防止误点击

为什么我的状态有时不会改变。是什么原因？

1 个答案: