Как сделать onMouseLeave в React включить дочерний контекст?

в настоящее время я создаю кнопку раскрывающегося списка, чтобы научиться реагировать. Я сделал два события onMouseEnter и onMouseLeave в Родительском div, чтобы сделать его видимым, когда он зависает, исчезает, когда нет. Проблема в том, что эти события связаны только с родителем.

Как сделать onMouseLeave в React включить дочерний контекст? Или, как я могу сохранить расширение состояния, когда я зависаю над детьми? 

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

2 ответов

у вас есть два различных divs в вашем DOM, которые не перекрываются; я разделюсь 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>
     );
}

The div что есть onMouseLeave прикрепленный к нему не содержит детей; поэтому, когда мышь перемещается, чтобы навести курсор на ребенка, он оставляет 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>
    );
}
4

используя on Mouse leave вместо mouse out и блокируя событие на детях, я получил его надежную работу независимо от того, как быстро я перемещаюсь по своим элементам списка.

https://stackoverflow.com/a/18837002/3302764

2