Question

React 组件状态不起作用

2018-05-18

68

javascript reactjs

我一直试图在 div 元素上实现悬停效果，就像这个 codesandbox 中一样： https://codesandbox.io/s/XopkqJ5oV

我想要执行此操作的组件是一个可重复使用的组件，在同一页面上多次使用。我想这就是我无法让它工作的原因。我错过了什么？

即使使用上述代码也无法在我的应用程序中工作。

编辑：感谢您的回复。我发现了这个问题：

我没有让 ShouldComponentUpdate 知道，它应该考虑 state.isHovering。

 shouldComponentUpdate(nextProps, nextState) {
    return (
      nextProps.post.id !== this.props.post.id ||
      nextProps.screenshotClickUrl !== this.props.screenshotClickUrl ||
      nextProps.onImageClick !== this.props.onImageClick ||
      nextProps.handleMouseHover !== this.props.handleMouseHover ||
      nextState.isHovering !== this.state.isHovering
    )
  }

Answer 1

您缺少 this ：

  toggleHoverState(state) {
    return {
      isHovering: !state.isHovering // Need a "this" to access state.
    };
  }

如果将元素堆叠得太近，则会干扰鼠标进入/离开事件，例如，如果将它们分开：

const Foo = () => {
  return (
    <div>
      <HoverExample />
      <div style={{height: '2em', border: '1px solid blue'}} />
      <HoverExample />
    </div>
  )
}

它的工作原理（我认为）与您预期的一样。

https://codesandbox.io/s/93l25m453o

我在它周围放了边框以帮助可视化问题。

如果这没有意义，请查看当将悬停指示器放在相邻跨度中而不是堆叠时会发生什么：

https://codesandbox.io/s/5k5jj3rpok