React onClick事件不會觸發setState

Question

我試圖在React.js中構建一個圖庫，一切都很順利。
在畫廊中，我創建了縮略圖對象 - 單擊此按鈕可以激發「迷你畫廊」，其中包含來自特定項目和項目描述的所有圖片。但是，要回到主畫廊，我正在使用附加的處理程序在「迷你圖庫」中創建「關閉」按鈕。
縮略圖點擊工作，但關閉按鈕不。請參閱下面的代碼。
我將非常感謝任何幫助！

這是主要畫廊：

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

這是每個縮略圖：

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

你應該添加event.stopPropagation()到closeViewer功能，防止點擊事件傳播到縮略圖 div元素

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

這裏是沒有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>

爲例

這裏是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

你應該結合自己的點擊處理程序的構造函數或使其箭頭功能以通過上下文：

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