Question

我想访问具有特定类名的所有 dom 元素，但是看起来像这样在纯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;

我得到的错误：

未捕获的TypeError：无法读取属性＆＃39; style＆＃39;未定义的在InformationJob.showDivs（information-job.component.js：74）在InformationJob.plusDivs（information-job.component.js：58）在InformationJob.render（information-job.component.js：138）

编辑：当我控制log var x = document.getElementsByClassName（＆＃34; mySlides＆＃34;）; x显示为null。

Answer 1

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

如何在React中按类名访问所有dom元素？

1 个答案: