切换不同状态的属性
这里有个小问题。我有3个div类，其中包含图像，每次用户按下其中一个图像(实际上是div)时，我希望切换每个图像的state属性。状态如下：
constructor(props) {
super(props);
this.state = {
img_1: 0,
img_2: 0,
img_3: 0
};
}我想要有一个单一的处理函数，可以切换所有不同的图像，我有。下面是div代码(每个图像都是一样的)：
<div className="pics" onClick={(e) => this.handlePic(e)}>
<h2>First picture</h2>
<img alt="" src={pic1} className="tier2"/>
</div>而handle函数目前是空的，因为我不知道如何将this.state.img_1的名称传递给它。当然，值应该在0和1之间切换，但我希望能够使用一个函数来切换所有3个图像。我不确定我的问题是否有意义，如果你想让我解释一下我的情况，请告诉我。
谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-09-21 05:36:19
你有3个不同的div，在你的每个div中定义一个onClick={()=>this.myhandle(nameofpic)} (你可以在这里硬编码nameofpic，例如在每个div中放一个像"img1"，"img2“这样的名字……而不是nameofpic)，然后在你的myhandle()中放入你的of，如下所示：
myhandle(nameofpic){
if(nameofpic==="img_1")
{this.setState({img_1:"valuechange"})
}
if(nameofpic==="img_2")
{this.setState({img_2:"valuechange"})
}
if(nameofpic==="img_3")
{this.setState({img_3:"valuechange"})
}}我希望你明白这一点，并为你工作。
Stack Overflow用户
发布于 2019-09-21 04:40:14
您应该为Image创建一个单独的组件，它将处理它自己的状态。通过这种方式，您可以管理任意数量的图像，而不仅仅是3个。
function Image({url}) {
const [overlay, setOverlay] = useState(false);
const toggleState = () => {
setOverlay(!overlay)
}
return <img src={url} alt={url} onClick={toggleState} />
}在这里，overlay可以是任何东西。
现在您可以多次使用此组件，并且它将拥有自己的状态管理。
Stack Overflow用户
发布于 2019-09-21 05:56:07
如果你没有使用钩子，这是一个解决方案。
在render方法中(在处理程序方法的参数中传递静态字符串)：
<div className="pics" onClick={e => this.handlePic('img1')}>
<h2>First picture</h2>
<img alt="" src={pic1} className="tier2" />
</div>你的处理程序(设置动态密钥)：
handlePic = key => {
this.setState(prevState => ({ [key]: !prevState[key] })); // This will toggle 0 or 1 simultaneously.
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58037296
复制相关文章
相似问题
Folium将叠加(.geojson)添加到地图
将外部geojson添加到传单层
在Mapbox-GL-JS中从具有多种类型的GeoJSON文件渲染FeatureCollection
将弹出窗口添加到geojson叶折线
将geoJSON特性属性添加到mapbox弹出窗口
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
