@uzi_no_uzi

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

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

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}}


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

Проведите эксперимент, сделайте так:
<div className='background-wave__opener-wrap' onClick={() => console.log('test')}>

и проверьте, есть ли результат в логе при клике.
Ответ написан
@justadumb
Покажите полный код родительского компонента, функция mobileMenuOpen объявлена в конструкторе что-ли? Если нет, то зачем там this?
Ответ написан
@Dasslier
Junior FrontEnd Developer
Если родительский компонент - класс, то метод объявляется так:
mobileMenuOpen = () =>

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы