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

Question

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

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

原文由 Ghoyos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

您可以阅读 官方文档，了解有关 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

原文由 Sajith Edirisinghe 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我重构了代码，这样你甚至可以看到你可以用 React 做什么，在你的情况下， styled-components 库很有帮助，因为它很流行并且经常与 React 应用程序一起使用，你可以将你的应用程序组合成组件块它们是可重用的和反应式的，这使得 React 非常强大。所以在这个例子中，我直接将颜色属性传递给 AppWrapper，每个组件都可以有自己的包装器。

 import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import AppWrapper from './AppWrapper';

const Header = () => (
  <header className='headerStyle'>
    <h1>This is my React test page.</h1>
  </header>
);

const Article = ({ title, content, divClassName, handleBoxClick, color }) => (
  <div className='experimentsHolder'>
    <h2>{title}</h2>
    <p>{content}</p>
    {handleBoxClick ? (
      <div
        className={divClassName}
        onClick={() => handleBoxClick(divClassName, color)}
      >Click Me!
    </div>
    ) : <div className={divClassName}></div>}
  </div>
);

class App extends Component {
  state = {
    boxClickCss: 'white',
  }

  boxClick = (divClassName, color) => this.setState({ [divClassName]: color });

  render() {
    return (
      <AppWrapper state={this.state}>

        <Header />
        <Article
          title="Test 1"
          content="This is an example of a static view."
          divClassName="box"
        />
        <Article
          title="Test 2"
          content="This is an example of a basic css animation 'renderd' by react."
          divClassName="boxBounce"
        />
        <Article
          title="Test 1"
          content="This is an example of an onClick event 'renderd' by react."
          divClassName="boxClickCss"
          handleBoxClick={this.boxClick}
          color="red"
        />

      </AppWrapper>
    );
  }
}

export default App;

应用程序包装器：

 import styled from 'styled-components';

const AppWrapper = styled.div`
  body {
    background-color:#222;
  }

  .headerStyle {
    background-color: #222;
    height: 50px;
    padding: 20px;
    color: white;
    text-align: center;
  }

  .experimentsHolder{
    background-color: teal;
    height: 200px;
    border-style: solid;
  }

  .box{
    background-color: white;
    height: 10px;
    width: 10px;
  }

  .boxBounce{
    background-color: white;
    position: relative; /*without position defined animations wont work*/
    height: 10px;
    width: 10px;
    animation: bounce 5s infinite;
  }

  .boxClickCss{
    background-color: ${({ state }) => state.boxClickCss};
    width: 70px;
  }

  @keyframes bounce {
    0% {left: 0%;}
    50% {left: 90%;}
    100% {left: 0%;}
  }
`;

export default AppWrapper;

原文由 Lafi 发布，翻译遵循 CC BY-SA 3.0 许可协议