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 that you have read and understand our privacy policy and code of conduct.

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