2017-08-24 128 views
0

我试图在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 } 
 
}

+0

你在closeViewer功能添加一个'console.log'?只是为了确保它进入 –

回答

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>

+1

这太棒了!感谢您的帮助。所有作品都应该像调整你的建议一样。 –

0

你应该结合自己的点击处理程序的构造函数或使其箭头功能以通过上下文:

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

我尝试了[本文]中的不同方法(https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56)。问题是,如果我将colsole.log()语句添加到我的处理程序中,它不会改变我的组件的状态 - 缩略图。 –

+0

@MaciekJarmula这很奇怪,尝试为添加一个不同的密钥,可能是文件名和索引键之间的组合= {'$ {i} _ $ {picture.filename}'} –