React 和 Javascript 问题，按钮更改背景颜色答案

【问题标题】：React and Javascript question, button change background colorReact 和 Javascript 问题，按钮更改背景颜色
【发布时间】：2021-03-21 23:01:37
【问题描述】：

我的问题是，该函数找不到我尝试使用 id 的类名，但发生了同样的错误。我如何解决这个问题或者我如何对我的函数“查看”类，可能是一个简单的错误，但我没有找到问题

return(
...
<div className="midia-wrapper">
  {renderFile()}
</div>
...
<button onClick={changeBackground} className="change-background">
        Change Background <i className="fas fa-palette"></i>
</button>

Javascript 和 CSS

function changeBackground() {

      const randomnumber = Math.floor(Math.random()*10)
      const back = document.getElementsByClassName("midia-wrapper");

        switch(randomnumber) {
          case 1:
            back.body.style.backgroundColor = "#ffffff";
            break;
          case 2:
            back.body.style.backgroundColor = "#000000";
            break;
          case 3:
            back.body.style.backgroundColor = "#008bb2";
            break;
          case 4:
            back.body.style.backgroundColor = "#0935B3";
            break;
          case 5:
            back.body.style.backgroundColor = "#B33212";
            break;
          case 6:
            back.body.style.backgroundColor = "#B38612";
            break;

          default:
            back.body.style.backgroundColor = "#ffffff";
      }

  }

【问题讨论】：

你应该改变方法；使用 React，你不会直接访问 DOM，而是依赖 state、props，如果你真的需要，还依赖 refs。您可以做的是让您的 changeBackground() 函数更改本地状态并将其设置为生成的颜色；然后参考那个状态来设置背景颜色

标签： javascript html css react-native

【解决方案1】：

正如我在评论中提到的，在 React 中你不能直接访问 DOM；一种做你想做的事情的方法是：

import React, { useState } from "react";

const selectRandomColor = () => {
    const randomnumber = Math.floor(Math.random() * 10);

    switch (randomnumber) {
        case 1:
            return "#ffffff";
        case 2:
            return "#000000";
        case 3:
            return "#008bb2";
        case 4:
            return "#0935B3";
        case 5:
            return "#B33212";
        case 6:
            return "#B38612";
        // ...
        default:
            return "#ffffff";
    }
};

const MyComponent = () => {
    const [bgColor, setBgColor] = useState(selectRandomColor());

    return (
        <React.Fragment>
            <div className="midia-wrapper" style={{ backgroundColor: bgColor }}>
                {renderFile()}
            </div>

            <button
                onClick={() => setBgColor(selectRandomColor())}
                className="change-background"
            >
                Change Background <i className="fas fa-palette"></i>
            </button>
        </React.Fragment>
    );
};

export default MyComponent;

【讨论】：

【解决方案2】：

getElementsByClassName("midia-wrapper")结果是所有类名为midia-wrapper的DOM元素，所以你应该使用数组索引来表示。

back[0].style.backgroundColor = "#ffffff";

【讨论】：