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>
        );
    }
}

从“React”导入React；
导出类Costura.Component{
建造师（道具）{
超级（道具）；
此.state={
令牌：{}，
isLoaded:false，
模型纹理：{}，
更改图标：false
};
this.changeIcon=this.changeIcon.bind（this）；
}    
changeIcon=（）=>{
this.setState（prev=>({
changeIcon:！prev.changeIcon
}));
};
render（）{
让图标；
if（this.state.changeIcon===true）{
图标=(
);
}否则{
图标=(
);
}
const{modelTextures}=this.state；
返回(
肋骨
{modelTextures.textures.map（纹理=>(
{texture.name}
{icon}
))}
);
}
}

您可以将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>
        );
    }
}

从“React”导入React；
导出类Costura.Component{
建造师（道具）{
超级（道具）；
此.state={
令牌：{}，
isLoaded:false，
模型纹理：{}，
selectedTexture:空
};
this.selectedImageIcon='../../../ic/icon check.svg'；
this.unselectedImageIcon='../../ic/icon uncheck.svg'；
}    
changeIcon=（textureId）=>（）=>{
这是我的国家({
selectedTexture:textureId
})
};
render（）{
const{modelTextures}=this.state；
返回(
肋骨
{modelTextures.textures.map（纹理=>(
{texture.name}
))}
);
}
}

可能使用背景图像，只更改img容器的类名？图标应该是

modelTextures

的一部分，并且不应该仅使用一个值进行渲染modelTextures是从API获取的结果，这是我获取要向用户显示的值、颜色及其名称的地方。图标位于

.map

内，将在@riyajkhan处重复该图标，然后附加该图标，并在每次单击更新所需对象时，在该图标之后是否设置状态？：/@Riyajkhan已经修复了@soalribeiroStill行上的一个拼写错误。同样，let必须存在？是的，语法方面应该没有任何问题。您可能希望将let替换为

const iconImgSrc

。Post错误（如果有）@soalribeiro@soalribeiro，映射函数中存在语法错误。查看更新后的帖子。它现在应该可以工作了。：）如何在渲染中显示刚才单击的名称@安舒班萨尔