如何使 React 中的 onMouseLeave 包含 child 上下文？

Question

我目前正在构建一个下拉按钮来学习 React。我在 parent div 中制作了两个 onMouseEnter 和 onMouseLeave 事件，使其在悬停时可见，不悬停时消失。问题是那些事件只坚持 parent.

如何让 React 中的 onMouseLeave 包含 child 上下文？或者，当悬停在 children 上时，如何保持状态扩展为真？

class DropDownButton extends React.Component {
constructor(){
    super();
    this.handleHoverOn = this.handleHoverOn.bind(this);
    this.handleHoverOff = this.handleHoverOff.bind(this);
    this.state = {expand: false};
}

handleHoverOn(){
    if(this.props.hover){
        this.setState({expand: true});
    }
}

handleHoverOff(){
    if(this.props.hover){
        this.setState({expand: false});
    }
}

render() {
    return (
        <div>
            <div className={styles.listTitle}
            onMouseEnter={this.handleHoverOn}
            onMouseLeave={this.handleHoverOff}>
            {this.props.name}
            </div>
            <div>
            {React.Children.map(this.props.children, function(child){
            return React.cloneElement(child, {className: 'child'});
            })}
            </div>
        </div>
     );
}
}

Answer 1

您的 DOM 中有两个不重叠的 div；我会分开 render 这样更明显：

render() {
    return (
        <div>

            <div className={styles.listTitle}
              onMouseEnter={this.handleHoverOn}
              onMouseLeave={this.handleHoverOff}>
                {this.props.name}
            </div>

            <div>
                {React.Children.map(this.props.children, function(child){
                    return React.cloneElement(child, {className: 'child'});
                })}
            </div>

        </div>
     );
}

附有onMouseLeave的div不包含children；因此，当鼠标悬停在 child 上时，它会离开 div 并调用 this.handleHoverOff。

如果 children 不应显示，您可以考虑使用 CSS 隐藏它们，或者有条件地渲染它们：

render() {
    return (
        <div className={styles.listTitle}
          onMouseEnter={this.handleHoverOn}
          onMouseLeave={this.handleHoverOff}>
            {this.props.name}
            {this.state.expanded && this.renderChildren()}
        </div>
     );
},

renderChildren() {
    return (
        <div>
            {React.Children.map(this.props.children, function(child){
                return React.cloneElement(child, {className: 'child'});
            })}
        </div>
    );
}

Answer 2

通过使用 on mouse leave 而不是 mouse out 并阻止子项上的事件，无论我在列表项中移动的速度有多快，它都能可靠地工作。

如何使 React 中的 onMouseLeave 包含 child 上下文？

How to make onMouseLeave in React include the child context?

mouseevent

reactjs