web-dev-qa-db-ja.com

ReactでonMouseLeaveを子コンテキストに含める方法は？

私は現在、Reactを学ぶためのドロップダウンボタンを作成しています。親divで2つのonMouseEnterイベントとonMouseLeaveイベントを作成して、ホバーしたときに表示されないようにして非表示にしています。問題は、それらのイベントが親にのみ付着することです。

ReactにonMouseLeaveを作成する方法、または子コンテキストを含める方法？または、子にカーソルを合わせたときに、状態展開をtrueに保つ方法を教えてください。

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>
     );
}
}
reactjsmouseevent
9
Karl Karl

DOM内に重複しない2つの異なるdivsがあります。 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>
     );
}

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

マウスアウトではなくオンマウスリーブを使用し、子のイベントをブロックすることで、リストアイテムをどれだけ速く移動しても、確実に機能するようになりました。

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

4
JoshuaTree