[英]Change Icon of clicked element (React.js)
I've done this before but it's not an optimized code, I was trying to do this in another way but I couldn't. 我之前已经做过,但是它不是经过优化的代码,我试图用另一种方式来做,但是我做不到。 So, what I need to achieve is to change the icon of only the clicked element.
因此,我需要实现的是仅更改单击元素的图标。 Right now, when I click on one of the icons, all of them change.
现在,当我单击其中一个图标时,所有图标都会更改。
For easier understanding, there is a list with multiple colors and the user has to select one of them. 为了更容易理解,有一个具有多种颜色的列表,用户必须选择其中一种。
I'll leave the important code down below: 我将重要代码留在下面:
import React from 'react';
export class Costura extends React.Component {
constructor(props) {
super(props);
this.state = {
token: {},
isLoaded: false,
modelTextures: {},
changeIcon: false
};
this.changeIcon = this.changeIcon.bind(this);
}
changeIcon = () => {
this.setState(prev => ({
changeIcon: !prev.changeIcon
}));
};
render() {
let icon;
if (this.state.changeIcon === true) {
icon = (
<img src="../../../ic/icon-check.svg"
alt="uncheck" className="Checking"
onClick={this.changeIcon} />
);
} else {
icon = (
<img src="../../../ic/icon-uncheck.svg"
alt="uncheck" className="Checking"
onClick={this.changeIcon} />
);
}
const { modelTextures } = this.state;
return (
<div id="Options">
<div id="OptionsTitle">
<img src="../../../ic/icon-linha.svg" alt="costura" />
<h2>Costura</h2>
</div>
{modelTextures.textures.map(texture => (
<div>
<img src={"url" + texture.image} />
<p key={texture.id}>{texture.name}</p>
{icon}
</div>
))}
</div>
);
}
}
You can set the selectedTextureId in the state and make a check against that when rendering the component to display the unchecked or checked image icon. 您可以将selectedTextureId设置为状态,并在渲染组件时对其进行检查以显示未选中或选中的图像图标。 Following is the code for reference.
以下是参考代码。
import React from 'react';
export class Costura extends React.Component {
constructor(props) {
super(props);
this.state = {
token: {},
isLoaded: false,
modelTextures: {},
selectedTexture: null
};
this.selectedImageIcon = '../../../ic/icon-check.svg';
this.unselectedImageIcon = '../../../ic/icon-uncheck.svg';
}
changeIcon = (textureId) => () => {
this.setState({
selectedTexture: textureId
})
};
render() {
const { modelTextures } = this.state;
return (
<div id="Options">
<div id="OptionsTitle">
<img src="../../../ic/icon-linha.svg" alt="costura" />
<h2>Costura</h2>
</div>
{modelTextures.textures.map(texture => (
<div key={texture.id}>
<img src={"url" + texture.image} />
<p key={texture.id}>{texture.name}</p>
<img
src={this.state.selectedTexture === texture.id ? this.selectedImageIcon: this.unselectedImageIcon }
alt="uncheck"
className="Checking"
onClick={this.changeIcon(texture.id)}
/>
</div>
))}
</div>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.