我试图在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 }
}
你在closeViewer功能添加一个'console.log'?只是为了确保它进入 –