如何使用JS React选择活动幻灯片和表元素?

Question

我是一个web开发的初学者。作为练习的一部分，我想修改下面链接的javascript代码。我想使按钮元素可点击。

https://codepen.io/hexagoncircle/pen/jgGxKR?editors=0010

const slide1Button = document.querySelector('.btn'); 
slide1Button.addEventListener('click', function() {
window.open(slideData[0].url);
}); 

const slide2Button = document.querySelector('.btn'); 
slide2Button.addEventListener('click', function() {
window.open(slideData[1].url);
}); 

const slideData = [
{
index: 0,

button: 'VISITER',
url: 'https://www.interflora.fr/',
src: 'https://lecoqetlecerisier.files.wordpress.com/2011/05/dsc037411.jpg' },

{
index: 1,
button: 'VISITER',
url: 'https://www.123fleurs.com/',
src: 'http://idata.over-blog.com/1/39/34/32/Poitiers-Ici-et-La/Macro-fleur-rose.JPG' },
{
index: 2,
button: 'VISITER',
url: 'https://www.aquarelle.com/',
src: 'http://monmondevirtuel.m.o.pic.centerblog.net/o/91d323e8.jpg' },
{
index: 3,
button: 'VISITER',
url: 'https://www.florajet.com/',
src: 'http://www.juille.com/images/006_3.JPG' }
];

我添加了代码

它的工作一半，因为我不能确定，对于幻灯片当前它选择按钮和点击重定向根据在slideData表中写入的url。

this只选择表格的第一个url，我想让元素具有交互性，并让它跟随当前幻灯片。

如果有人可以帮助我或建议我在我的方法。

Answer 1

可以在Slide组件本身的按钮上添加onClick事件。

滑动组件->呈现()

<button className="slide__action btn" onClick={() =>  window.open(url, '_blank')}>{button}</button>

不要忘记将url prop导入到幻灯片组件

const { src, button, headline, index, url  } = this.props.slide

下面是一个工作示例:CodePen.