使用ReactJS Fullpage如何使用onclick图像转到部分

Question

我正在使用Fullpage React。我想点击圆形图像的侧边栏，其中的数字对应于我想要去的部分。如何激活oncl​​ick？我在部分（即section1，section2等）上有数据锚点，在图像上我有数据菜单锚点（即section1，section2等）。我正在App.js的课堂上做这一切。我似乎无法弄清楚如何使用onclick来绑定被点击的图像以将其带到Fullpage的那个部分。我能够向上和向下滚动到每个工作正常的部分。我想让用户选择滚动和/或点击每个部分。

我首先使用refs然后为滚动到部分效果添加了Fullpage。但是我的onclick与refs停止了工作。如何让每个部分的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>

Answer 1

你可以看看the example in the official documentation的反应全页。

基本上：

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

你可以在这里看到它：https://codesandbox.io/s/m34yq5q0qx