javascript - 我怎样才能把这个常规的 JavaScript 函数变成 React.js 可以读取的东西

问题描述

我正在跟随一段视频，用 JavaScript 制作幻灯片。我试图弄清楚如何在 create-react-app 中实现从视频到 React 的此功能。我对 React 不太熟悉，但我认为我不应该尝试在我的函数中使用“getElementsByClassname”。我应该怎么做才能完成这项工作？

我不确定在哪里调用函数，就像在常规 JavaScript 中一样，所以我一直在使用 onClick 事件调用它。如果有人也可以帮助我，那就太棒了。

import React, {Component} from 'react';
import {Link} from "react-router-dom";
import './Showcase.css';

class Showcase extends Component{
    constructor(props){
        super(props);
        this.initGallery = this.initGallery.bind(this);
    }
    initGallery(){
        let slideIndex, slides, dots, captionText;
        slideIndex = 0;
        slides = document.getElementsByClassName('imageHolder');
        slides[slideIndex].style.opacity = 1;
        console.log('hello');
    }
    render(){
        return(
            <section onClick={this.initGallery} id="Showcase"> {/*CONTAINS ALL SLIDING IMAGES*/}
                <div className="captionHolder">
                    <p className="captionText">Caption Text</p>
                </div>
                <div className="imageHolder"> {/*HOLDS ALL IMAGES HERE*/}
                    <img src="https://www.spacex.com/sites/spacex/files/amos17_v2.jpg" alt="Amos-17 Mission"/>
                    <p className="captionText">Caption Text-01</p>
                </div>

                <div className="imageHolder"> {/*HOLDS ALL IMAGES HERE*/}
                    <img src="https://www.spacex.com/sites/spacex/files/v2_smallsatheader.png" alt="RideShare Missions"/>
                    <p className="captionText">Caption Text-02</p>
                </div>

                <div className="imageHolder"> {/*HOLDS ALL IMAGES HERE*/}
                    <img src="https://www.spacex.com/sites/spacex/files/nasa_astronauts3.jpg" alt="NASA Astronauts on crew Dragon"/>
                    <p className="captionText">Caption Text-03</p>
                </div>
            </section>
        );
    }
}

export default Showcase;

没有收到任何错误，我通过在点击事件触发该函数时添加一个 console.log 来检查该函数是否被成功调用。我只是没有得到想要的结果，即获取 className 并将不透明度设置为 1，这将使图像出现，因为它在 CSS 文件中设置为不透明度 0。

标签： javascriptreactjscreate-react-app

javascript - 我怎样才能把这个常规的 JavaScript 函数变成 React.js 可以读取的东西

问题描述

解决方案

推荐阅读