javascript - 我正在做一个切换，我想在切换功能触发时更改 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“样式组件”。有人可以帮忙吗？提前致谢！快乐编码：D

标签： javascriptreactjsgatsby

Answer 1

对于这种情况，您可以轻松使用 react state。

例子：

渲染方法：

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

点击更改：

 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其反模式中使用。