带有嵌套React组件的onMouse事件

Question

I am trying to build a React component that allows highlighting the hovered component when the mouse is over it. I will have nested versions of these components, so when the mouse is over the outer component I want to put a border around the outer component and all of its children, but once the mouse moves over a child component I only want the border around the child component and it's children, but not the parent component.

I created a simple fiddle to highlight problem. It is very inconsistent. At times it works, but other times it draws the border around both components or none.

 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

In your Hover component in your mouseEnter you need to use the event that is already being passed. To stop event propagation

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

Basically when 2 event collide this called bubbling , you can rad more event.stopPropagation() in the MDN Docs