javascript - 如何在 React 中通过类名访问所有 dom 元素？

Question

我想访问所有具有特定类名的 dom 元素，但在 React 上看起来这不像在纯 javascript 中那样工作。似乎找不到元素。

import React from 'react';
import {Route, Link} from 'react-router-dom';
import {Bootstrap, Grid, Row, Col, Button, Image, Modal, Popover} from 'react-bootstrap';
import Header from '../header/header.component';
import style from './information.style.scss';
import { Player } from 'video-react';
import YouTube from 'react-youtube';

class InformationJob extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            slideIndex: 1,
            job: null,
        };
        this.showDivs = this.showDivs.bind(this);
    }

    plusDivs(n) {
         this.setState({slideIndex: this.state.slideIndex + n});
         this.showDivs(this.state.slideIndex);
    }

    showDivs(n) {
        var i;
        var x = document.getElementsByClassName("mySlides");
        if (n > x.length) {this.setState({slideIndex :1})}
        if (n < 1) {this.setState({slideIndex :x.length})}
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        x[this.state.slideIndex-1].style.display = "block";
    }

    componentDidMount() {
        this.showDivs(this.state.slideIndex);
    }

    _onReady(event) {
        // access to player in all event handlers via event.target
        event.target.pauseVideo();
    }

    render() {
        const opts = {
            height: '390',
            width: '100%',
            playerVars: { // https://developers.google.com/youtube/player_parameters
                autoplay: 0
            }
        };
        return (
            <div className={"wrapperDiv"}>

                <div className={"flexDivCol"}>
                    <div id="header">
                        <Header size="small"/>
                    </div>
                    <div>
                        <h3 className={""} style={{marginBottom: '20px'}}>Majoitus- ja ravitsemisala</h3>
                        <h4 className={"primaryColor"}>Tarjoilija</h4>
                    </div>
                    <div id="imageSection">
                        <div className="w3-content w3-display-container">
                            <img className="mySlides"
                                 src="https://thumbs.dreamstime.com/b/waitress-serving-food-to-visitors-young-european-couple-table-positive-plates-restaurant-48875722.jpg"/>
                                <img className="mySlides"
                                     src="https://thumbs.dreamstime.com/b/waitress-serving-food-to-visitors-young-european-couple-table-positive-plates-restaurant-48875722.jpg"/>
                                    <img className="mySlides"
                                         src="https://thumbs.dreamstime.com/b/waitress-serving-food-to-visitors-young-european-couple-table-positive-plates-restaurant-48875722.jpg"/>
                                        <img className="mySlides"
                                             src="https://thumbs.dreamstime.com/b/waitress-serving-food-to-visitors-young-european-couple-table-positive-plates-restaurant-48875722.jpg"/>
                            <button className="w3-button w3-black w3-display-left" onClick={this.plusDivs(-1)}>&#10094;</button>
                            <button className="w3-button w3-black w3-display-right" onClick={this.plusDivs(1)}>&#10095;</button>
                        </div>
                        {/*<div className={"screenSection"} style={{backgroundImage: 'url(https://thumbs.dreamstime.com/b/waitress-serving-food-to-visitors-young-european-couple-table-positive-plates-restaurant-48875722.jpg)'}}></div>*/}
                    </div>
                    <div id="jobDescription">
                        <p className={"secondaryColor"}>Donec facilisis tortor ut augue lacinia, at viverra est semper. Sed sapien metus, scelerisque nec pharetra id, tempor a tortor. Pellentesque non dignissim neque. Ut porta viverra est, ut dignissim elit elementum ut. Nunc vel rhoncus nibh, ut tincidunt turpis. Integer ac enim pellentesque, adipiscing metus id, pharetra odio. Donec facilisis tortor ut augue lacinia, at viverra est semper. Sed sapien metus, scelerisque nec pharetra id, tempor a tortor. Pellentesque non dignissim neque. Ut porta viverra est, ut dignissim elit elementum ut. Nunc vel rhoncus nibh, ut tincidunt turpis.  </p>
                    </div>
                    <div id="videoSection">
                        <YouTube
                            videoId="0cfVxK5YrGY"
                            opts={opts}
                            onReady={this._onReady}
                        />
                    </div>
                    <div id={"btnFilter"}>
                        <Link to='/traineeships'>
                            <Button  className={"primaryBtn"}>
                                Näytä harjoittelupaikat
                            </Button>
                        </Link>
                    </div>
                </div>
            </div>
        );
    }
}

export default InformationJob;

我得到的错误:

Uncaught TypeError: Cannot read property 'style' of undefined at InformationJob.showDivs (information-job.component.js:74) at InformationJob.plusDivs (information-job.component.js:58) at InformationJob.render (information-job.component.js:138)

编辑:当我控制台日志 var x = document.getElementsByClassName("mySlides"); x 显示为空。

Answer 1

按钮(两个按钮)上的 onClick 不断调用函数 plusDivs，后者又调用 showDivs。它应该是 onClick={() => this.plusDivs(-1)}。