Не корректная работа события onMouseOut, в чем проблема?

Question

[Дмитрий Винокуров]

Элемент до клика имеет размеры 60х60, после клика 200х170. onMouseOut срабатывает по старым размерам элемента, хоть конслолил непосредственно перед выполнением функции, дом видит новые размеры..

Код

<div
                ref={this.elementRef}
                className={cn()}
                onClick={(!onShow)?this.onShow:null}
                style={{
                    alignSelf: (show)?'baseline':'center',
                    transition: (show)?'.4s' : '0s',
                    zIndex: (show)?666:1,
                    height: (show)?'200px':this.state.sizeCard,
                    width: (show)?'170px':this.state.sizeCard,
                    background: card.bgnColor,
                    color: card.textColor
                }}
                onMouseOut={(onShow)?this.offShow:null}
            >

..........

Comments

[Дмитрий Винокуров]

Причем вот так:

onMouseOver={(!onShow)?this.onShow:null}
                onMouseOut={(onShow)?this.offShow:null}

все отлично.. Какой-то специфический нюанс js, кто бы объяснил бы.. Или киньте ссылку почитать

Answer 1

[Павел Диденко]

Думаю, вам сюда тыц

Comments

[Дмитрий Винокуров]

Павел, привет. Дело в том, что данный див у меня наивысший в компоненте, после onClick он же увеличивается в размерах. К сожалению не то, спасибо!

[Дмитрий Винокуров]

Вот так работает:

onMouseOver={(!onShow)?this.onShow:null}
onMouseOut={(onShow)?this.offShow:null}

Вот так работает не корректно:

onClick={(!onShow)?this.onShow:null}
onMouseOut={(onShow)?this.offShow:null}

[Дмитрий Винокуров]

Поспешил с ответом, ты был прав. Спасибо!