Использование ReactJS Fullpage, как использовать клик по изображению, чтобы перейти в раздел - PullRequest
Новая
       40

Использование ReactJS Fullpage, как использовать клик по изображению, чтобы перейти в раздел

0 голосов
/ 11 апреля 2019

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

Сначала я использовал ссылки, а затем добавил полную страницу для эффекта прокрутки раздела.Но мой 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>

1 Ответ

0 голосов
/ 12 апреля 2019

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

В основном: 

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

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

...