javascript - 如何使用 reacts 'onClick' 改变元素的 style.backgroundColor

Question

我最近一直在试验 React，想知道如何使用 React 的“onClick”语法来更改元素的背景颜色。关于这个问题的相关页面在我的 git hub 帐户上，都是 App.js和 App.css .

如你所见；我已经到了这样的地步，一旦你“点击”其中包含文本的元素“点击我!” - 它调用函数 boxClick()。但是，一旦运行框单击中的代码，它就会出错 -> (imgurPic) .现在，如果这是一个普通的 js 页面，我可以很容易地完成这项工作，但我是新来的。我想知道如何使这个功能正常工作以及为什么当前代码不工作。在我看来，当我使用 document.getElementsByClassName 时，我确实定义了“boxClickCss”；这就是为什么我不明白这个错误。

Answer 1

在 React 中，直接操作实际 DOM 是一种不好的做法，因为 React 更改首先应用于虚拟 DOM，然后仅在真实 DOM 中修改差异。此外，当您的函数被调用时，DIV 可能实际上并不存在于真实的 DOM 中。

您可以通过阅读 official documentation 了解更多关于 React 组件的生命周期以及如何在每个生命周期阶段操纵组件行为和外观的信息。 .

但是，至于你的问题，你需要使用state来改变DIV的颜色。下面是代码(只包括修改的部分。)

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      bgColor: ""
    }
  }


  boxClick = (e) => {
    this.setState({
      bgColor: "red"
    })
  }

  render() {
    return (
      <div className="App">


        <article className='experimentsHolder'>
          <h2>Test 3</h2>
          <p>This is an example of an onClick event 'renderd' by react.</p>
          <div className="boxClickCss" 
          style={{backgroundColor: this.state.bgColor}}
           onClick={this.boxClick}>Click Me!</div>
        </article>

      </div>
    );
  }
}

这是一个工作示例

https://codesandbox.io/embed/0p1zmpk4yl