CODEWITHSUNDEEP
javascriptreactjs
Vico
Vico

Reputation: 118

React onMouseEnter/onMouseLeave didn't work as expected (strange behaviour)

I'm trying to create indicator for my grid item so it will give red mark as background color. but it seems react very slow on modify the DOM, and make some component not updated

here is my code, i loop the item

{(function(rows, i, len) {
    while (++i <= len) {
    rows.push (<div
        key={i.toString()}
        className={"col-sm-3 bg-light mb-1 p-3 parent"}
        style={that.styles.item}
        onMouseEnter={that.itemMouseEnter}
        onMouseLeave={that.itemMouseLeave}>
        <center>
            <button type="button" class="close" aria-label="Close" style={that.styles.closeButton}>
                <span aria-hidden="true">&times;</span>
            </button>
            <div className="rounded-circle img-responsive mb-3" style={that.styles.image} />
            <h4>VicoErv</h4>
        </center>
    </div>)
    }

    return rows;
})([], 0, 10)}

And the item listener

itemMouseEnter(event) {
    event.stopPropagation();
    let elem = event.target;

    elem.classList.remove('bg-light');
    elem.classList.add('bg-danger');
}

itemMouseLeave(event) {
    event.stopPropagation();
    let elem = event.target;

    elem.classList.remove('bg-danger');
    elem.classList.add('bg-light');
}

here i attach gif

react strange

is there any solution to do this in react?

Upvotes: 0

Views: 1939

Answers (1)

Vico
Vico

Reputation: 118

solved by use react bind and state

{(function(rows, i, len) {
    while (++i <= len) {
    rows.push (<div
        key={i.toString()}
        className={"col-sm-3 " + (that.state.itemSelected === i ? 'bg-danger' : 'bg-light') + " mb-1 p-3 parent"}
        style={that.styles.item}
        onMouseEnter={that.itemMouseEnter.bind(that, i)}
        onMouseLeave={that.itemMouseLeave.bind(that, i)}>
        <center>
            <button type="button" className="close" aria-label="Close" style={that.styles.closeButton}>
                <span aria-hidden="true">&times;</span>
            </button>
            <div className="rounded-circle img-responsive mb-3" style={that.styles.image} />
            <h4>VicoErv</h4>
        </center>
    </div>)
    }

    return rows;
})([], 0, 10)}

event function

itemMouseEnter(id, e) {
    e.preventDefault();
    e.stopPropagation();
    let elem = e.target;

    this.setState({itemSelected: id})
}

itemMouseLeave(id, e) {
    e.preventDefault();
    let elem = e.target;

    this.setState({itemSelected: false});
}

Upvotes: 1

Related Questions