如何使用数组方法改变div中的不同颜色。在单按钮reactjs中单击

Question

import { use state } from 'react';
import React from 'react'; 
import './style.css';
    
export default function Div() { 
    const [data, set data] = useState('green');
    return ( 
        <div class="sec" style={{ 'background-color': data }}>
        {data}
        <button on Click={() => setData('red', 'orange')}>state click 
    ); 
}

Answer 1

首先=>您应该删除单词“set”和“data”之间的空格，如下所示：

const [data, setData] = useState('green');

Second =>;在 style 属性中，第二个参数是一个字符串，但在这种情况下，您必须使用反引号（`）来使用“模板文字”，如下所示：

<div class="sec" style={{ background-color: `${data}`}}>

Answer 2

我已经修复了您代码中的拼写错误和错误，并且它似乎工作正常。

import { useState } from "react";
import React from "react";
import "./style.css";

export default function Div() {
  const [data, setData] = useState("green");
  return (
    <div class="sec" style={{ "background-color": data }}>
      <button onClick={() => setData("orange")}>state click</button>
    </div>
  );
}

单击按钮时，它将背景颜色更改为橙​​色，但我仍然不明白，您想根据颜色数组更改背景颜色吗？如果是这样，您可以使用 Math.random 来完成，每次单击都会从颜色数组中生成一个随机项目。

import { useState } from "react";
import React from "react";
import "./style.css";

export default function Div() {
  const [data, setData] = useState("green");
  const handleColorChange = () => {
    const colors = ["orange", "green", "red", "black"];
    var colorItem = colors[Math.floor(Math.random() * colors.length)];
    setData(colorItem);
  };
  return (
    <div class="sec" style={{ "background-color": data }}>
      <button onClick={() => handleColorChange}>state click</button>
    </div>
  );
}

Answer 3

这是简短的解释

首先：状态用于存储发生变化的事物。

颜色数组不会改变，所以不要将其存储在状态中。

所选颜色将会改变，因此请将其存储在状态中。在这种情况下，您可以通过使用数组中颜色的索引来做到这一点。

接下来，当颜色发生变化时，您要选择下一种。这只是增加索引的问题。然而，当你到达终点时，你可能会想要循环回来。所以检查一下。

第三，由于您只需要一个按钮，因此只创建一个按钮。不要循环那里的颜色数组。

使用状态值来指定背景颜色。

onclick 是 React 中的 onClick。

只需传递设置 nextColor 的函数即可。它不需要任何参数。

最后，如果您想要一个 HTML 按钮元素，那么它就是 。 JSX 名称以大写字母开头意味着您正在使用一个组件。有很多第三方 Button 组件，但您没有导入任何组件。尝试在此处使用将递归地使用您刚刚创建的组件。

import React, { useState } from "react";

const colours = ['red', 'green', 'blue', 'orange', 'yellow'];

export function Button(props) {
    const [selectedColourIndex, setColourIndex] = useState(0);

    const nextColour = () => {
        const newColourIndex = selectedColourIndex + 1;
        if (colours[newColourIndex]) 
            setColourIndex(newColourIndex);
        else
            setColourIndex(0);
    }

    return (<button type="button" style={{backgroundColor: colours[selectedColourIndex]}}
            onClick={nextColour}>Change color</button>);
}