Question

我之前已经做过，但是它不是经过优化的代码，我试图用另一种方式来做，但是我做不到。因此，我需要实现的是仅更改单击元素的图标。现在，当我单击其中一个图标时，所有图标都会更改。
为了更容易理解，存在一个具有多种颜色的列表，用户必须选择其中一种。
我将重要代码留在下面：

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

Answer 1

您可以将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.js）

1 个答案: