React onClick事件不會觸發setState

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

這是主要畫廊： React onClick事件不會觸發setState

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

來源

2017-08-24 Maciek Jarmula

你在closeViewer功能添加一個'console.log'？只是爲了確保它進入 –

你應該添加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>

來源

2017-08-24 11:50:16

這太棒了！感謝您的幫助。所有作品都應該像調整你的建議一樣。 –

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

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

來源

2017-08-24 10:12:10

我嘗試了[本文]中的不同方法（https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56）。問題是，如果我將colsole.log（）語句添加到我的處理程序中，它不會改變我的組件的狀態 - 縮略圖。 –

@MaciekJarmula這很奇怪，嘗試爲添加一個不同的密鑰，可能是文件名和索引鍵之間的組合= {'$ {i} _ $ {picture.filename}'} –

React onClick事件不會觸發setState

回答

相關問題