Почему не работает вызов функции переданной через props?

Question

[uzi_no_uzi]

В родительском компоненте есть такая функция

this.mobileMenuOpen = () => {

    console.log('тут')

    this.setState({
        mobileMenuShow: !this.state.mobileMenuShow,
    })

    console.log(this.state.mobileMenuShow)
}

Также внутри родительского компонента есть вот такой дочерний:

<BackgroundWave 
    link={this.waveBackground} 
    link2={this.waveBackgroundWrapper}
    onMobileMenuOpen={this.mobileMenuOpen}
    mobileMenuOpen={this.state.mobileMenuShow}
/>

В дочерний компонент передается функция вышеonMobileMenuOpen={this.mobileMenuOpen}

Далее эта функция вызывается в дочернем компоненте:

function BackgroundWave(props) {

    let classBackground, classArrow = '';
    if(props.mobileMenuOpen) {
        classBackground = 'background-wave background-wave--opened';

    } else {
        classBackground = 'background-wave';
    }




    return (
        <div className={classBackground} ref={props.link2}>
            <canvas ref={props.link} id='background-animation' className='background-wave__item'></canvas>
            <div className='background-wave__opener-wrap' onClick={props.onMobileMenuOpen}>
                <svg className='background-wave__opener'>
                    <use xlinkHref='img/icons/sprite.svg#mobile-opener' />
                </svg>
            </div>
        </div>
    );

  }

Но вызов не срабатывает, я не могу понять почему, пробовал вызывать различными способами.

onClick={props.onMobileMenuOpen()}
onClick={() => {props.onMobileMenuOpen}}

Но это не помогло

Comments

[FabiBoom]

если вызов не срабатывает, значит клика нету по div нету?

[hzzzzl]

да, канвас с background-animation точно лежит по z-index ниже, чем этот див background-wave__opener-wrap?

попробуй на канвас положить этот onClick={props.onMobileMenuOpen} и посмотреть что случится, или сразу на родительский див div className={classBackground}

[Петр Мухуров]

this.mobileMenuOpen = () => {

    console.log('тут')

    this.setState({
        mobileMenuShow: !this.state.mobileMenuShow,
    })

    console.log(this.state.mobileMenuShow)
}

скиньте код родительского компонента, не понятно, где и как это объявлено

Answer 1

[Евгений Чурманов]

Передача функции и ее вызов выглядят как правильные. Возможно событие onClick на элементе <div> не происходит, из-за того, что сам клик идет по svg.

Проведите эксперимент, сделайте так:

<div className='background-wave__opener-wrap' onClick={() => console.log('test')}>

и проверьте, есть ли результат в логе при клике.

Comments

[uzi_no_uzi]

Да, есть, я уже проверял это

Answer 2

[justadumb]

Покажите полный код родительского компонента, функция mobileMenuOpen объявлена в конструкторе что-ли? Если нет, то зачем там this?

Answer 3

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

Если родительский компонент - класс, то метод объявляется так:
mobileMenuOpen = () =>

Если функциональный компонент, то так:
const mobileMenuOpen = () =>

Сделайте так и должно заработать, либо если не заработает, выложите полный код в песочницу