React onClick -Ereignis wird nicht ausgelöst. SetState

Question

Ich versuche, eine Bildergalerie in React.js zu erstellen, alles lief bis jetzt reibungslos.
In der Galerie erstelle ich Thumbnail-Objekte - beim Klicken wird "Mini-Galerie" mit allen Bildern aus einem bestimmten Projekt und einer Beschreibung für das Projekt ausgelöst. Um jedoch zur Hauptgalerie zurückzukehren, erstelle ich den "SCHLIESSEN" -Knopf innerhalb von "Mini-Galerie" mit einem angehängten Handler.
Thumbnail-Klick funktioniert, Schließen-Schaltfläche jedoch nicht. Bitte beachten Sie den unten beigefügten Code.
Ich werde für jede Hilfe sehr dankbar sein!

Dies ist Haupt Galerie:

import React from 'react'; 
 

 
import Thumbnail from '../components/Thumbnail'; 
 

 
export default class Drawings extends React.Component { 
 
\t render() { 
 
\t \t const linkPrefix = "./life/"; 
 
\t \t const imageS = ".800.jpg"; 
 
\t \t const imageL = ".jpg"; 
 
\t \t const lifePics = [ 
 
\t \t \t { 
 
\t \t \t \t name: "One", 
 
\t \t \t \t filename: [ 
 
\t \t \t \t \t "lifedrawing1", 
 
\t \t \t \t ], 
 
\t \t \t \t descr: "one", 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t name: "Two", 
 
\t \t \t \t filename: [ 
 
\t \t \t \t \t "lifedrawing2", 
 
\t \t \t \t \t "lifedrawing2ed", 
 
\t \t \t \t \t "lifedrawing2ed2", 
 
\t \t \t \t ], 
 
\t \t \t \t descr: "two", 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t name: "Three", 
 
\t \t \t \t filename: [ 
 
\t \t \t \t \t "lifedrawing3", 
 
\t \t \t \t ], 
 
\t \t \t \t descr: "three", 
 
\t \t \t }, 
 
\t \t ] 
 
\t \t return (
 
\t \t \t <div id="Drawings" className="container row around wrap"> 
 
\t \t \t \t {lifePics.map(
 
\t \t \t \t \t (picture, i) => 
 
\t \t \t \t \t \t <Thumbnail 
 
\t \t \t \t \t \t \t key={i} 
 
\t \t \t \t \t \t \t linkPrefix={linkPrefix} 
 
\t \t \t \t \t \t \t filename={picture.filename} 
 
\t \t \t \t \t \t \t imageS={imageS} 
 
\t \t \t \t \t \t \t imageL={imageL} 
 
\t \t \t \t \t \t /> 
 
\t \t \t \t)} 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
}

Dieses jeder Thumbnail ist:

import React from 'react'; 
 

 
export default class Thumbnail extends React.Component { 
 
\t constructor(props) { 
 
    \t \t super(props); 
 
    \t \t this.state = { 
 
    \t \t viewerDisplay: "hidden", 
 
    \t \t }; 
 
\t } 
 

 
\t thumbnailClick(event) { 
 
\t \t this.setState({ 
 
\t \t \t viewerDisplay: "visible", 
 
\t \t }); 
 
\t } 
 

 
\t closeViewer(event) { 
 
\t \t this.setState({ 
 
\t \t \t viewerDisplay: "hidden", 
 
\t \t }); 
 
\t } 
 

 
\t render() { 
 
\t \t const thumbnailStyle = { 
 
\t \t \t width: '45%', 
 
\t \t \t height: '300px', 
 
\t \t \t backgroundImage: 'url('+this.props.linkPrefix + this.props.filename[0]+this.props.imageS+')', 
 
\t \t \t backgroundSize: 'cover', 
 
\t \t \t marginBottom: '10px', 
 
\t \t \t cursor: 'pointer', 
 
\t \t }; 
 
\t \t var viewerStyle = { 
 
\t \t \t position: "absolute", 
 
\t \t \t top: "300px", 
 
\t \t \t right: "50px", 
 
\t \t \t bottom: "10px", 
 
\t \t \t left: "50px", 
 
\t \t \t visibility: this.state.viewerDisplay, 
 
\t \t \t background: "black", 
 
\t \t \t cursor: "auto", 
 
\t \t }; 
 
\t \t const viewerColStyle = { 
 
\t \t \t width: "50%", 
 
\t \t \t height: "100%", 
 
\t \t } 
 

 
\t \t return (
 
\t \t \t <div 
 
\t \t \t \t className="thumbnail container col between" 
 
\t \t \t \t style={thumbnailStyle} 
 
\t \t \t \t onClick={this.thumbnailClick.bind(this)} 
 
\t \t \t > 
 
\t \t \t \t <div 
 
\t \t \t \t \t id="Viewer" 
 
\t \t \t \t \t className="viewer container row between" 
 
\t \t \t \t \t style={viewerStyle} 
 
\t \t \t \t > 
 
\t \t \t \t \t <div 
 
\t \t \t \t \t \t id="PicList" 
 
\t \t \t \t \t \t className="container col around" 
 
\t \t \t \t \t \t style={viewerColStyle} 
 
\t \t \t \t \t > 
 
\t \t \t \t \t \t Thumbnails 
 
\t \t \t \t \t \t {//map function for thumbnails of particular gallery 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div 
 
\t \t \t \t \t \t id="ProjectDescr" 
 
\t \t \t \t \t \t className="container col around" 
 
\t \t \t \t \t \t style={viewerColStyle} 
 
\t \t \t \t \t > 
 
\t \t \t \t \t \t Project Descr 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <button 
 
\t \t \t \t \t \t onClick={this.closeViewer.bind(this)} 
 
\t \t \t \t \t >CLOSE</button> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
}

Answer 1

Sie event.stopPropagation() zum closeViewer Funktion hinzufügen sollten div Element

closeViewer(event) { 
    event.stopPropagation(); 
    this.setState({ 
     viewerDisplay: "hidden", 
    }); 
} 

hier zu Thumbnail Ausbreitung des Click-Ereignis zu verhindern, ist ein Beispiel ohne stopPropagation

<body> 
 
    <div onclick="clickDiv()"> 
 
     <button onclick="clickButton()">Test</button> 
 
    </div> 
 
\t 
 
    <script> 
 
     function clickButton() { 
 
     alert('clickButton'); 
 
     } 
 
\t \t \t 
 
     function clickDiv() { 
 
     alert('clickDiv'); 
 
     } 
 
    </script> 
 
</body>

Hier ist ein Beispiel mit stopPropagation

<body> 
 
    <div onclick="clickDiv()"> 
 
     <button onclick="clickButton(event)">Test</button> 
 
    </div> 
 
\t 
 
    <script> 
 
     function clickButton(e) { 
 
     e.stopPropagation(); 
 
     alert('clickButton'); 
 
     } 
 
\t \t \t 
 
     function clickDiv() { 
 
\t  alert('clickDiv'); 
 
     } 
 
    </script> 
 
</body>

Answer 2

Sie sollten Ihre Click-Handler im Konstruktor binden oder ein Pfeil machen Funktion um den Kontext zu übergeben:

thumbnailClick = (event) => { 
    this.setState({ 
     viewerDisplay: "visible", 
    }); 
}