изменить цвет, когда onClick () с React - PullRequest
Новая
       20

изменить цвет, когда onClick () с React

1 голос
/ 08 июля 2019

У меня есть такие кнопки на фотографиях:

Проблема в том, что когда я нажимаю только на один плейлист, чтобы все они стали красными, это явно не то, что я хочу. Вот что я получаю сейчас:

Я фильтрую с помощью idMedia. Это функция changeColor: 

  onChangeColor = (e) => {

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

и это возвращение. Любая помощь будет оценена. 

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

Ответы [ 2 ]

1 голос
/ 08 июля 2019

вам потребуется немного изменить состояние 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>
0 голосов
/ 08 июля 2019

onChangeColor и backgroundColor определены в родительском компоненте, этот компонент одинаков для всех экземпляров компонента Hit и, таким образом, backgroundColor изменяется для всех из них при переключении.

...