0

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

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

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

1 ответ 1

0

тут по коду есть несколько замечаний так как onMobileMenuOpen - это функция, то

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

не будет работать так как. в первом случае она отрабатывает на момент рендера а не клика, должно быть: onClick={props.onMobileMenuOpen}; во втором случае при клике у нас вообще ничего не просиходит. должно быть: onClick={() => {props.onMobileMenuOpen()}}

далее:

this.mobileMenuOpen = () => {

    console.log('тут')

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

    console.log(this.state.mobileMenuShow)
}

может не работать так как методы класса определяются без this ->

class Example extends Component{
mobileMenuOpen = () => {}
  render(){}
}

вообще вид пропсы лучше выносить через деструкторы:

function BackgroundWave({link,mobileMenuOpen,link2,onMobileMenuOpen}) {
    let classBackground, classArrow = '';
    if( mobileMenuOpen) {
        classBackground = 'background-wave background-wave--opened';
    } else {
        classBackground = 'background-wave';
    }
    return (
        <div className={classBackground} ref={link2}>
            <canvas ref={link} id='background-animation' className='background-wave__item' />
            <div className='background-wave__opener-wrap' onClick={onMobileMenuOpen}>
                <svg className='background-wave__opener'>
                    <use xlinkHref='img/icons/sprite.svg#mobile-opener' />
                </svg>
            </div>
        </div>
    );
  }   

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.