Как изменить цвет элемента по клику в другом компоненте?

Question

Как изменить цвет элемента по клику в другом компоненте?

Рейтинг: 0Ответов: 1Опубликовано: 28.01.2023

Есть блок "place_1", по умолчанию зеленого цвета. При клике на этот элемент появляется модальное окно, где есть кнопка "Бронь". По клику "Бронь" блок "place_1" должен из зеленого окрашиваться в красный. Поменять цвет не получается так как блок в другом компоненте.

import Modal from "../modal/modal";
import { useState } from "react";


function Freelance () {
    const [modalActive, setModalActive ] = useState(false)

    return(

        <div className="freelance_conteiner">
                <div className="freelance_office">
                        <div className="place_1" onClick={()=>setModalActive(true)}>1</div>
                        <Modal active={modalActive} setActive={setModalActive}/>
                </div>
        </div>
     
    )
}

export default Freelance;

Модальное окно

import React from "react"
import "./modal.css"

const Modal = ({active, setActive}) =>{

    return(

    <div className={active ? "modal active" : "modal"} onClick={()=>setActive(false)}>

       <div className={active ? "modal__content active" : "modal"} onClick={e => e.stopPropagation()}>

            <button className="modal_btn">Бронь!</button>

       </div>

    </div>

    )
}

export default Modal;

reactjs компоненты

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Создайте состояние в компоненте Freelance, которое будет отвечать за цвет и передайте функцию изменения цвета в компонент Modal в виде пропсов, как вы это делаете с setModalActive:

function Freelance () {
  const [modalActive, setModalActive] = useState(false);
  const [colorPlace, setColorPlace] = useState(false);

  return(

    <div className="freelance_conteiner">
      <div className="freelance_office">
        <div 
          className="place_1" 
          onClick={()=>setModalActive(true)}
          style={{color: colorPlace ? 'red' : 'green'}}
        >1</div>
        <Modal 
          active={modalActive} 
          setActive={setModalActive} 
          changeColor={setColorPlace}
        />
      </div>
    </div>

  )
}

Добавьте стиль цвета в зависимости от состояния переменной style={{color: colorPlace ? 'red' : 'green'}} В компоненте Modal при нажатии кнопки, вызывайте функцию и передавайте нужное значение:

const Modal = ({active, setActive, changeColor}) =>{
  return(
    <div className={active ? "modal active" : "modal"} onClick={()=>setActive(false)}>
      <div 
        className={active ? "modal__content active" : "modal"} 
        onClick={e => e.stopPropagation()}
      >
        <button 
          className="modal_btn" 
          onClick={() => changeColor(true)}
        >Бронь!</button>
      </div>
    </div>
  )
}

Для примера используется значение состояния как true/false

Так же можно не добавлять style а добавлять например новый класс, тогда строку

className="place_1"

Надо изменить на

className={'place_1 ' + colorPlace ? 'redClass' : 'greenClass'}

Как изменить цвет элемента по клику в другом компоненте?

Ответы