Блог

Я использую Fullpage React. Я хочу нажать на боковую панель с изображениями кругов с номерами, соответствующими разделу, в который я хочу перейти. Как мне активировать onclick? У меня есть привязки данных к разделам (т.Е. section1, section2 и т. Д.), А На изображениях у меня есть привязки меню данных (т. Е. section1, section2 и т. Д.). Я делаю все это в классе в моем App.js . Кажется, я не могу понять, как использовать onclick для привязки щелкаемого изображения, чтобы перенести его в этот раздел с помощью Fullpage. Я могу прокручивать вверх и вниз до каждого раздела, который работает нормально. Я хочу предоставить пользователю возможность прокручивать и / или нажимать на каждый раздел.

Сначала я использовал ссылки, а затем добавил Fullpage для эффекта прокрутки до раздела. Но мой onclick с ссылками перестал работать. Как я могу заставить работать onclick для каждого раздела и сохранить эффект прокрутки для каждого раздела?

 <img className='circle-1' src='assets/images/circle1.png' onClick={() => this.clickToSection(this.section1ref.current)} data-menuanchor='section1'/>
<img className='circle-2' src='assets/images/circle1.png' onClick={() => this.clickToSection(this.section2ref.current)} data-menuanchor='section2'/>
<img className='circle-3' src='assets/images/circle2.png' onClick={() => this.clickToSection(this.section3ref.current)} data-menuanchor='section3'/>


<div className='section' ref={this.section1ref} data-anchor='section1'>
                SECTION 1
</div>

<div className='section' ref={this.section2ref} data-anchor='section2'>
                SECTION 2
</div>

<div className='section' ref={this.section3ref} data-anchor='section3'>
                SECTION 3 />
</div>
  

Вы можете взглянуть на пример в официальной документации для react-fullpage.

В основном:

 <button onClick={() => fullpageApi.moveSectionDown()}>
    Click me to move down
</button>
  

Вы можете увидеть это в действии здесь:
https://codesandbox.io/s/m34yq5q0qx