如何在reactjs中使用onclick事件更改整个页面的背景颜色

Question

我需要解决一个问题，即在单击按钮时更改车身背景颜色。我需要更改四种颜色。如何解决？在反应中。

import React, { useState } from 'react';
import './App.css';
function App() {
var colors=[
{
value:1,label:"red"
},
{
value:2,label:"green"
}
]
var [setbgcolor,ddlvalue]=useState(colors.label)
var ddlhandle=e=>{
ddlvalue(e.label)
}
return (
<div className="App">
<style>{'body {background-color:'+setbgcolor+'}'}</style>
<button onClick={ddlhandle} >click</button>
<select options={colors} onChange={ddlhandle}></select>
</div>
);
}
export default App;

Answer 1

您需要两个状态，一个用于保存select的值，另一个用于保持当前bg颜色。类似地，您需要两个处理程序，一个用于select，另一个用于button。此外，您需要使用select中的option元素来显示选项。

import React, { useState } from "react";
import "./styles.css";
export default function App() {
var colors = [
{
value: 1,
label: "red"
},
{
value: 2,
label: "green"
}
];
var [inputValue, setInputValue] = useState(colors[0].label);
var [bgcolor, setbgColor] = useState(colors[0].label);
var ddlhandle = (e) => {
setInputValue(e.target.value);
};
var buttonHandle = () => {
setbgColor(inputValue);
};
return (
<div
style={{ backgroundColor: bgcolor, width: "100vw", height: "100vh" }}
className="App"
>
<button onClick={buttonHandle}>click</button>
<select onChange={ddlhandle}>
{colors.map((color) => (
<option value={color.label}>{color.label}</option>
))}
</select>
</div>
);
}

CodeSandbox链接-https://codesandbox.io/s/zealous-williamson-58qf8?file=/src/App.js

---

编辑：由于需要更改整个body的颜色，因此需要设置div的width: "100vw"和height: "100vh"。

Answer 2

您应该使用两个className或两个样式作为背景

并处理className或样式之间的更改参数

import React, { useState } from 'react';
import './App.css';
function App() {
var colors=[
{
value:1,label:"red"
},
{
value:2,label:"green"
}
]
var [setbgcolor,ddlvalue]=useState(colors[0].label)
var ddlhandle=e=>{
ddlvalue(e.target.value)
}
return (
**<div className="App" style={{backgroundColor:`${setbgcolor}`}}>**
<button onClick={ddlhandle} >click</button>
<select options={colors} onChange={ddlhandle}></select>
</div>
);
}
export default App;

Answer 3

如果您想通过单击一个按钮来遍历一个可能的颜色数组来更改背景颜色，您可以简单地存储当前颜色的数组索引和+1，直到达到限制，然后重置回0。

下面是一个简短的例子：

创建了一个数组，其中包含表示可以拾取的颜色的对象

const colors = [
{ title: "Red", color: "#de1212" },
{ title: "Blue", color: "#122dde" },
{ title: "Green", color: "#32a852" },
{ title: "Yellow", color: "#d7de12" }
];

然后创建一个状态，您可以在其中存储当前选定颜色的索引。注：给出默认索引0

const [colorValue, setColorValue] = useState(0);

然后简单地创建一个onClick将执行的简单方法。此方法将使索引递增1，直到它达到与数组中有对象的数目相同的数目。一旦达到限制，它将重置为0

const handleClick = () =>
setColorValue(colorValue + 1 < colors.length ? colorValue + 1 : 0);

现在在一个渲染它取决于你如何渲染它。我只是这样做来呈现它

<div className="App" style={{ backgroundColor: colors[colorValue].color }}>
<h1>Selected color: {colors[colorValue].title}</h1>
<button className="btn" onClick={handleClick}>
Click to change color
</button>
</div>

此代码的实时示例

如果你需要用select来做这件事，并且只需要用按钮onClick来读取select的值并将其设置为颜色，那么情况是一样的——只需再加一个状态，分别存储select的值或使用ref。其余的都是一样的。

此外，请注意，不要使用var。它太老了。对值发生变化的变量使用let，对值不变的变量使用const。