reactjs – 如何使React中的onMouseLeave包含子上下文？

我目前正在构建一个下拉按钮来学习React.我在父div中创建了两个onMouseEnter和onMouseLeave事件,使其在悬停时可见,而不是.问题是这些事件只会影响父母.

如何使用React中的onMouseLeave包含子上下文？
或者,当我在徘徊在孩子身上时,如何保持状态扩展？

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>
     );
}
}

你的DOM中有两个不重叠的div;我会拆分渲染,所以更明显：

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不包含子项;所以,当鼠标移动到孩子上时,它会离开div并调用this.handleHoverOff.

您可以考虑使用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>
    );
}