Question

所以我正在改变w3s学校的幻灯片，并把它变成反应组件。我将所有函数更改为类中的方法，并使其初始状态为第一张幻灯片。然后当您单击按钮或点时，可以使用setState更改它。但是，这些功能不会出现在浏览器中。即使我在console.log（func_name）中也表示未定义。我已经改变了图像，因此可以对其进行测试。

我也知道方法确实出现问题时必须将for(int i =0 ;i < m ; i++) { List<Integer> t = q.subList(j, k); List<Integer> copyOfSubList = new ArrayList<> (t); t.clear (); q.addAll(0, copyOfSubList); }更改为onClick='func_name'

反应组件

onClick={this.func_name}

这是附带的CSS

import React from 'react';
import RightArrow from './rightarrow.jsx'
import LeftArrow from './leftarrow.jsx'

export default class Slideshow extends React.Component {
  constructor() {
    super();
    this.state = {
      slideCount: 0
    }
    this.nextSlide = this.nextSlide.bind(this);
    this.previousSlide = this.previousSlide.bind(this);
    this.showSlides = this.showSlides.bind(this);
  }

  nextSlide() {
    this.setState({
      slideCount: this.state.slideCount + 1
    })
  }

  previousSlide() {
    this.setState({
      slideCount: this.state.slideCount - 1
    })
  }

  showSlides(n) {
    let slideCount = 0;
    const slides = document.getElementsByClassName("mySlides");
    const dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
      this.setState({
        slideCount: 0
      })
    }
    if (n < slides.length) {
      this.setState({
        slideCount: 0
      })
      slideCount = slides.length - 1
    }
    for (var i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    for (var i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideCount].style.display = "block";
    dots[slideCount].className = "active";
  }

  render() {
    return (
      <div>
        <div className="slideshow-container">
          <div className="mySlides fade">
            <div className="numbertext">1 / 3</div>
            <img src="https://cdn.pixabay.com/photo/2013/06/09/06/07/barbecue-123668_1280.jpg" className="slide-img" />
            <div className="text">Caption Text</div>
          </div>

          <div className="mySlides fade">
            <div className="numbertext">2 / 3</div>
            <img src="https://cdn.pixabay.com/photo/2016/06/06/18/29/meat-1440105_1280.jpg" className="slide-img" />
            <div className="text">Caption Two</div>
          </div>

          <div className="mySlides fade">
            <div className="numbertext">3 / 3</div>
            <img src="https://cdn.pixabay.com/photo/2014/08/14/14/21/shish-kebab-417994_1280.jpg" className="slide-img" />
            <div className="text">Caption Three</div>
          </div>

          <LeftArrow />
          <RightArrow />
        </div>
        <br />

        <div className="slideshow-dot">

          <span className="dot" onClick='currentSlide(1)'></span>
          <span className="dot" onClick='currentSlide(2)'></span>
          <span className="dot" onClick='currentSlide(3)'></span>

        </div>
      </div>
    );
  }
}

Answer 1

要调用组件的meyhod你应该使用this构造onClick={() => this.yourFunction('yourParametr')}或不带参数onClick={this.yourFunction}

Answer 2

使用以下内容更新您的代码。

您需要将方法处理程序附加到箭头组件。

<div className="slideshow-dot"> <span className="dot" onClick='showSlide(1)'></span> <span className="dot" onClick='currentSlide(2)'></span> <span className="dot" onClick='showSlide(3)'></span> </div>

在React类上传递方法

2 个答案: