Question

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

我创建了一个简单的小提琴来突出问题。这是非常不一致的。有时它会起作用，但有时它会在两个组件之间绘制边框，或者不在两个组件之间绘制边框。

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

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

mouseEnter

基本上，当2个事件碰撞为mouseEnter = event => { event.stopPropagation(); // do rest of the stuff as is }时，您可以在MDN Docs中吸引更多bubbling

带有嵌套React组件的onMouse事件

1 个答案: