Passing-Methoden auf React-Klasse

Question

So wechselte ich eine Diashow, die auf W3s Schulen war und verwandelte es in eine Reaktionskomponente. Ich änderte alle Funktionen in Methoden der Klasse und machte es so, dass der Anfangszustand die erste Folie war. Dann, wenn Sie auf die Schaltflächen oder Punkte klicken, um mit setState zu ändern. Diese Funktionen werden jedoch nicht im Browser angezeigt. Auch wenn ich console.log (func_name) sage es undefiniert. Ich habe die Bilder geändert, damit sie getestet werden können.

Ich weiß auch, wenn die Methoden krank ändern erscheinen müssen onClick='func_name' zu onClick={this.func_name}

1. Komponente Reagieren

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> 
    ); 
    } 
} 

und hier ist die begleitende CSS

* {box-sizing:border-box} 

/* Slideshow container */ 
.slideshow-container { 
    max-width: 1000px; 
    position: relative; 
    margin: auto; 
} 

.mySlides { 
    display: none; 
} 

/* Slide Images */ 

.slide-img { 
    width: 100%; 
} 

.dot-control { 
    text-align: center; 
} 

/* Next & previous buttons */ 
.prev, .next { 
    cursor: pointer; 
    position: absolute; 
    top: 50%; 
    width: auto; 
    margin-top: -22px; 
    padding: 16px; 
    color: white; 
    font-weight: bold; 
    font-size: 18px; 
    transition: 0.6s ease; 
    border-radius: 0 3px 3px 0; 
} 

/* Position the "next button" to the right */ 
.next { 
    right: 0; 
    border-radius: 3px 0 0 3px; 
} 

/* On hover, add a black background color with a little bit see-through */ 
.prev:hover, .next:hover { 
    background-color: rgba(0,0,0,0.8); 
} 

/* Caption text */ 
.text { 
    color: #f2f2f2; 
    font-size: 15px; 
    padding: 8px 12px; 
    position: absolute; 
    bottom: 8px; 
    width: 100%; 
    text-align: center; 
} 

/* Number text (1/3 etc) */ 
.numbertext { 
    color: #f2f2f2; 
    font-size: 12px; 
    padding: 8px 12px; 
    position: absolute; 
    top: 0; 
} 

/* The dots/bullets/indicators */ 
.dot { 
    cursor:pointer; 
    height: 13px; 
    width: 13px; 
    margin: 0 2px; 
    background-color: #bbb; 
    border-radius: 50%; 
    display: inline-block; 
    transition: background-color 0.6s ease; 
} 

.active, .dot:hover { 
    background-color: #717171; 
} 

/* Fading animation */ 
.fade { 
    -webkit-animation-name: fade; 
    -webkit-animation-duration: 1.5s; 
    animation-name: fade; 
    animation-duration: 1.5s; 
} 

@-webkit-keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
} 

@keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
} 

Answer 1

meyhod der Komponente nennen Sie this Bau onClick={() => this.yourFunction('yourParametr')} oder ohne Argumente onClick={this.yourFunction}

Answer 2

aktualisieren Sie Ihren Code mit folgenden verwenden sollten.

Sie müssen Methodenhandler an die Pfeilkomponenten anhängen.

<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>