React onClick事件不会触发setState
[英]React onClick event does not fire setState
问题描述
I am trying to build an image gallery in React.js, everything went smoothly until now. 
我试图在React.js中建立一个图片库，到目前为止一切都进行得很顺利。
In gallery I am creating Thumbnail objects - on click this will fire "mini gallery" with all pictures from particular project and description for project. 在图库中，我正在创建Thumbnail对象-单击此选项将触发“迷你图库”，其中包含来自特定项目的所有图片和项目说明。 However to get back to main gallery I am creating "CLOSE" button within "mini gallery" with an attached handler. 但是要回到主画廊，我要在“迷你画廊”中创建带有附加处理程序的“关闭”按钮。
Thumbnail click works, however Close Button does not. 缩略图单击有效，但是关闭按钮无效。 Please see code attached below. 请参阅下面的代码。
I will be very grateful for any help! 我将非常感谢您的帮助！
This is Main Gallery: 这是主画廊：
import React from 'react'; import Thumbnail from '../components/Thumbnail'; export default class Drawings extends React.Component { render () { const linkPrefix = "./life/"; const imageS = ".800.jpg"; const imageL = ".jpg"; const lifePics = [ { name: "One", filename: [ "lifedrawing1", ], descr: "one", }, { name: "Two", filename: [ "lifedrawing2", "lifedrawing2ed", "lifedrawing2ed2", ], descr: "two", }, { name: "Three", filename: [ "lifedrawing3", ], descr: "three", }, ] return ( <div id="Drawings" className="container row around wrap"> {lifePics.map( (picture, i) => <Thumbnail key={i} linkPrefix={linkPrefix} filename={picture.filename} imageS={imageS} imageL={imageL} /> )} </div> ); } }
This is each Thumbnail:
这是每个缩略图：
import React from 'react'; export default class Thumbnail extends React.Component { constructor(props) { super(props); this.state = { viewerDisplay: "hidden", }; } thumbnailClick(event) { this.setState({ viewerDisplay: "visible", }); } closeViewer(event) { this.setState({ viewerDisplay: "hidden", }); } render () { const thumbnailStyle = { width: '45%', height: '300px', backgroundImage: 'url('+this.props.linkPrefix + this.props.filename[0]+this.props.imageS+')', backgroundSize: 'cover', marginBottom: '10px', cursor: 'pointer', }; var viewerStyle = { position: "absolute", top: "300px", right: "50px", bottom: "10px", left: "50px", visibility: this.state.viewerDisplay, background: "black", cursor: "auto", }; const viewerColStyle = { width: "50%", height: "100%", } return ( <div className="thumbnail container col between" style={thumbnailStyle} onClick={this.thumbnailClick.bind(this)} > <div id="Viewer" className="viewer container row between" style={viewerStyle} > <div id="PicList" className="container col around" style={viewerColStyle} > Thumbnails {//map function for thumbnails of particular gallery } </div> <div id="ProjectDescr" className="container col around" style={viewerColStyle} > Project Descr </div> <button onClick={this.closeViewer.bind(this)} >CLOSE</button> </div> </div> ); } }
2 个解决方案
解决方案1
1 已采纳 2017-08-24 11:50:16
you should add event.stopPropagation() to the closeViewer function to prevent propagation of the click event to Thumbnail div element 你应该添加event.stopPropagation()到closeViewer功能，防止点击事件传播到缩略图 div元素
closeViewer(event) {
event.stopPropagation();
this.setState({
viewerDisplay: "hidden",
});
}
Here is an example without stopPropagation 这是一个没有stopPropagation的示例
<body> <div onclick="clickDiv()"> <button onclick="clickButton()">Test</button> </div> <script> function clickButton() { alert('clickButton'); } function clickDiv() { alert('clickDiv'); } </script> </body>
Here is an example with stopPropagation 这是stopPropagation的示例
<body> <div onclick="clickDiv()"> <button onclick="clickButton(event)">Test</button> </div> <script> function clickButton(e) { e.stopPropagation(); alert('clickButton'); } function clickDiv() { alert('clickDiv'); } </script> </body>
解决方案2
0 2017-08-24 10:12:10
You should bind your click handler in the constructor or make it an arrow function in order to pass context: 您应该在构造函数中绑定click处理程序，或使其成为箭头函数以传递上下文：
thumbnailClick = (event) => {
this.setState({
viewerDisplay: "visible",
});
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.