javascript - 更改单击元素的图标(React.js)
问题描述
我以前做过,但它不是优化的代码,我试图以另一种方式做到这一点,但我做不到。因此,我需要实现的是仅更改单击元素的图标。现在,当我单击其中一个图标时,它们都发生了变化。
为了更容易理解,有一个包含多种颜色的列表,用户必须选择其中一种。
我将在下面留下重要的代码:
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>
);
}
}
解决方案
您可以在状态中设置 selectedTextureId 并在渲染组件以显示未选中或选中的图像图标时对其进行检查。以下是供参考的代码。
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>
);
}
}
推荐阅读
- c++ - 在 C++ 中,如何将包含 std::variant 元素的向量的迭代器相乘?对迭代器类型进行强制转换?
- python - 在类中创建 tkinter 标签、按钮、...
- c++ - 打印 std::vector
没有多余的字符 - sql - Typescript 和 typeorm 问题
- multithreading - 了解线程同步问题解决方案
- c++ - C ++中的属性和pragma有什么区别?
- python - Python C 扩展如何测试引用计数和内存泄漏?
- python - beautifulsoup 抓取表,缺少链接名称
- swift - 来自 Reality Composer 的 SwiftUI 和 RealityKit 触发动作
- excel - 如果“=”有多个值怎么办?