使用 React onClick() 时更改颜色

Question

我在图片中有这样的爱心按钮：

问题是当我只点击一个播放列表来点赞时，所有的播放列表都会变成红色，这显然不是我想要的。这就是我现在得到的：

我正在使用 idMedia 进行过滤，这是 changeColor 函数：

  onChangeColor = (e) => {

        this.props.addFavorisAction(e.target.id)
        this.setState({
            backgroundColor: !this.state.backgroundColor
        })
  }

这是return。任何帮助将不胜感激。

const Hit = ({ hit, onToggleList, onChangeColor, displayAudioPlayer, onToggleMP3Read, backgroundColor }) => {
    return (
    <div className="cm-recherche-item-container">
        <div className="cm-recherche-item-block1">
            <div className="cm-recherche-item-avatar-container">
                <img
                    className="cm-recherche-item-avatar"
                    alt=""
                    src={hit.comedienPhoto}
                />
            </div>
            <div className="cm-recherche-item-title-container">
                <div className="cm-recherche-item-name">
                    {hit.comedienNomComplet}
                </div>
                <div className="cm-recherche-item-title">
                    {hit.mediaIntitule.length > 60 ? (
                        hit.mediaIntitule.substr(0, 60) + '...'
                    ) : (
                            hit.mediaIntitule
                        )}
                </div>
            </div>
            <div className="cm-recherche-item-actions-container">
                <div className="cm-recherche-item-actions">
                    <div className="cm-recherche-item-action">
                        <i className="icon icon-forward-o"></i>
                    </div>
                    <div className="cm-recherche-item-action">
                        <i id={hit.idMedia} onClick={onChangeColor} className={`icon icon-like-o ${backgroundColor ? "gx-text-gris" : "gx-text-red"}`} ></i>
                    </div>
                    <div className="cm-recherche-item-action">
                        <i id={hit.idComedien} onClick={onToggleList} className="icon icon-chevron-right"></i>
                    </div>
                </div>
            </div>
        </div>

        <div className="cm-recherche-item-block2">
            <div className="cm-recherche-item-emojis">
                {hit.interpretationsIcons.map((value, index) => {
                    return (
                        <div className="cm-recherche-item-icon">
                            <div>
                                <Tooltip title={hit.interpretationsLabels[index]}>
                                    {String.fromCodePoint(value)}
                                </Tooltip>
                            </div>
                        </div>
                    )
                })} 
                {hit.langueIcon !== "" && hit.langueIcon != null &&
                    <Tooltip title={hit.langueLabel}>
                        <div className="cm-recherche-item-icon">
                            <i class={`flag flag-24 gx-mr-2 ${hit.langueIcon} cm-recherce-lang-icon`}></i>
                        </div>
                    </Tooltip>
                }
                {hit.typeIcon !== "" && hit.typeIcon != null &&
                    <div className="cm-recherche-item-icon">
                        <div>
                            <Tooltip title={hit.typeLabel}>
                                {String.fromCodePoint(hit.typeIcon)}
                            </Tooltip>
                        </div>
                    </div>
                }
            </div>
            <div className="cm-recherche-item-tags">

                <div style={tagStyle}>
                    <i className="icon icon-tag cm-recherche-icon-tag"></i>
                </div>

                {hit.interpretationsLabels.map((value, index) => {
                    return (
                        <div style={tagStyle}>
                            <div class="cm-recherche-tag">{value}</div>
                        </div>
                    )
                })}
            </div>
        </div>
        <div className="cm-recherche-item-first" style={{ display: "none" }}>
            <div className="cm-recherche-item-infos-container">
                <div className="cm-recherche-item-emojis-container"> 
                </div>  
            </div>   
        </div>   
        <div className="cm-recherche-item-second"> 
        </div>
    </div>
)
}

Answer 1

onChangeColor 和 backgroundColor 在父组件中定义，该组件对于所有 Hit 组件实例都是相同的，因此 backgroundColor 更改所有他们在切换。

Answer 2

您需要稍微更改 backgroundColor 状态才能实现，如下所示：

 onChangeColor = (e) => {

    const id = e.target.id;
    this.props.addFavorisAction(id)
    const newLikeState = !this.state.backgroundColor[id]
    const newBackgroundColorList = {...this.state.backgroundColor, [id]: newLikeState }

    this.setState({
            backgroundColor: newBackgroundColorList 
        })
  }


<i 
  id={hit.idMedia} 
  onClick={onChangeColor} 
  className={`icon icon-like-o ${backgroundColor[hit.idMedia] ?  "gx-text-red" : "gx-text-gris"  }`} 
  >
</i>

使用 React onClick() 时更改颜色

change the color when onClick() with React

javascript

onchange

onclick

reactjs