javascript - 带有嵌套 React 组件的 onMouse 事件

Question

我正在尝试构建一个 React 组件，该组件允许在鼠标悬停在其上方时突出显示悬停的组件。我将拥有这些组件的嵌套版本，因此当鼠标悬停在外部组件上时，我想在外部组件及其所有子组件周围放置一个边框，但是一旦鼠标移到子组件上，我只想在外部组件周围放置边框子组件及其子组件，但不是父组件。

我创建了一个简单的 fiddle 来突出问题。这是非常不一致的。有时它可以工作，但有时它会在两个组件周围绘制边框或不绘制边框。

class Hello extends React.Component {
  render() {
    return <div>
             <Hover name={'Outer Component Hover'}>
               <Hover  name={'Inner Component Hover'}/>
             </Hover>
           </div>;
  }
}

class Hover extends React.Component {
constructor(props) {
    super(props);
    this.state = { draggable: false };
  }

  mouseEnter = () => {
    this.setState({ draggable: true });
  }
  mouseLeave = () => {
    this.setState({ draggable: false });
  }
  render() {
    var cls = this.state.draggable ? 'over' :'none';
  
    return (
    <div className={cls} onMouseEnter={this.mouseEnter} onMouseOut={this.mouseLeave}>
    {this.props.name}
    {this.props.children}
    </div>
    )
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

.over {
  border-width: 2px;
  border-style: solid;
  border-color: red;
  cursor: move;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Answer 1

在 mouseEnter 的 Hover 组件中，您需要使用已经传递的事件。停止事件传播

mouseEnter = event => {
   event.stopPropagation();
   // do rest of the stuff as is
}

基本上，当两个事件发生碰撞时，这称为“冒泡”，您可以在 MDN Docs 中添加更多 event.stopPropagation()