Я делаю переключение, и я хочу изменить цвет фона изменения div, когда срабатывает функция переключения

Question

Моя функция:

function onClickChange() {
  let MyDiv = document.getElementById('myDIV')
  if (MyDiv.style.display === 'none') {
    MyDiv.style.display = ''
  } else {
    MyDiv.style.display = 'none'
  }
}

И мой div:

<div id="myDIV"> Hello world</div>

<div id="backgroundColor" onClick={onClickChange}>I am div with image and I need a background color change toggle functionality based on "myDIV" toggle functionality</div>

В качестве информации я использую css "styled-components". Кто-нибудь может помочь?Заранее спасибо!Удачного кодирования: D

Answer 1

Для этой ситуации вы можете легко использовать state.

Пример:

Метод рендеринга:

<div className={this.state.myClass} onClick={onClickChange}>I am div..</div>

onClickChange:

 onClickChange() {
      const {myClass} = this.state // read state first
      if (myClass === 'red') {
        this.setState({myClass: 'black'}) // set some black class name
      } else {
        this.setState({myClass: 'red'}) // set some red class name
      }
    }

Когда состояние изменяется, автоматически вызывается ваш метод рендеринга.

Не используйте document.getElementById('myDIV') в REACT его antipattern.

Answer 2

Проверьте ниже код, чтобы изменить цвет фона, вы можете использовать style.backgroundColor для нажатой div

function onClickChange(obj) {
  let MyDiv = document.getElementById('myDIV');
  //element.classList.toggle('mystyle');
  if (MyDiv.style.display === 'none') {
    MyDiv.style.display = ''
    obj.style.backgroundColor="red";
  } else {
    MyDiv.style.display = 'none'
    obj.style.backgroundColor="blue";
  }
}

<div id="myDIV"> Hello world</div>

<div id="backgroundColor" onClick="onClickChange(this)">I am div with image and I need a background color change toggle functionality based on "myDIV" toggle functionality</div>