当我将鼠标悬停在子上时如何防止在React.Js上触发父悬停

时间:2018-06-19 13:51:36

标签: reactjs onmouseover onmouseout

https://codesandbox.io/s/mmk8w39l49

这是我使用OnMouseOver

制作的应用程序的简单副本

有父框(Card.jsx,天蓝色框)和子框(Container.jsx黄色框),它们具有鼠标悬停,鼠标按下,鼠标移出,并且每个框都有菜单栏,如果悬停弹出真实菜单栏但是当我将鼠标悬停在框上之后,每当我将鼠标悬停在菜单栏上时,就会发生一些错误(父鼠标悬停和菜单栏鼠标悬停发生3次)

当我将鼠标悬停在菜单栏上时,我不想跳出框框

也许

{this.state.hover || this.state.active ? (
      <div>
        {this.state.toolHover ? (
          <div
            onMouseOut={this.handleOnMouseOutTool}
            style={{
              ...toolStyle,
              transition: "opacity 0.5s ease",
              opacity: this.state.toolHover ? "1" : "0"
            }}
          >
            <button
              style={{
                ...buttonStyle,
                borderTopLeftRadius: "100%",
                borderBottomLeftRadius: "100%"
              }}
            />
            <button style={buttonStyle} />
            <button style={buttonStyle} />
          </div>
        ) : (
          <div
            onMouseOver={this.handleOnMouseOverTool}
            style={{
              ...handleStyle
            }}
          />
        )}
      </div>
    ) : null}

这种风格的代码会出错,但是我不知道如何解决

0 个答案:

没有答案