Question

在ReactJS中，我想使用功能组件来更改按钮按下时的背景颜色。颜色应存储在数组中，并且在按下按钮时应在更改背景颜色之间循环。

这是我尝试过的：

import React, { useState } from "react";

export default function Button(props) {
    const [colors, setColour] = useState(['red', 'green', 'blue', 'orange', 'yellow']);

    const changeBtncolor = () => {
        setColour();
    }

    return (
        colors.map((color, id) => {
            return
            <Button key={id} type="button"
            style={{backgroundColor: color}}
            onclick={changeBtncolor(props)}>Change color
            </Button>
        })
    )
}

Answer 1

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

颜色的数组不会改变，因此不要将其存储在状态中。

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

下一步，当颜色更改时，您要选择下一个。这只是增加索引的问题。但是，当您走到尽头时，您可能需要循环播放。所以检查一下。

第三，由于只需要一个按钮，因此仅创建一个按钮。不要在那儿循环遍历颜色。

使用状态中的值分配背景色。

onclick在React中是onClick。

只需传递用于设置nextColour的功能即可。不需要任何参数。

最后，如果需要HTML按钮元素，则为<button>。以大写字母开头的JSX名称表示您正在使用组件。有很多第三方Button组件，但是您没有导入任何组件。尝试在此处使用<Button>时将使用刚创建的组件来递归。

Live demo由于依赖关系而由第三方托管。

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>);
}

Answer 2

适合您的示例是：

import React, { useState } from "react";

export default function App() {
  const Colors = ["red", "green", "blue", "orange", "yellow"];
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {Colors.map((color, key) => (
        <Button Color={color} Colors={Colors} key={key} />
      ))}
    </div>
  );
}

function Button({ Color, Colors }) {
  const [color, setColor] = useState(Color);
  const handleChange = (e) => {
    e.preventDefault();
    setColor(Colors[Math.floor(Math.random() * Colors.length)]);
  };
  const style = {
    backgroundColor: color
  };
  return (
    <button onClick={handleChange} style={style}>
      Click Me!
    </button>
  );
}

演示：https://00qh5.csb.app/

预览

上一个答案：

如果在return语句后未使用()，则会出错。它在JavaScript中变成Automatic Semicolon Insertion in JavaScript，将不起作用。因此，请勿将return语句挂起。

您应该仅将状态用于那些会发生变化的事情。不用于存储变量。

此外，我不会在这里使用片段<></>，因为这没有任何意义。所以我也删除了。

onClick={changeBtncolor(props)}将立即执行changeBtncolor(props)，因此您需要将其包装在处理函数中。

您没有将任何值传递给setColour函数中的changeBtncolor函数，但是您传递的是props，这并不清楚，所以我改变了现在，可以通过使用颜色名称代替props来使用该功能。

请注意color和道具colour之间的区别。这是更新的React代码，可以按照您的期望工作。

import React, { useState } from "react";

export default function Button({ colour }) {
  const [colors, setColour] = useState([
    "red",
    "green",
    "blue",
    "orange",
    "yellow"
  ]);

  const changeBtncolor = color => {
    setColour(color);
  };

  return colors.map((color, id) => (
    <Button
      key={id}
      type="button"
      style={{ backgroundColor: color }}
      onclick={() => changeBtncolor(colour)}
    >
      Change color
    </Button>
  ));
}

如何使用颜色数组更改按钮按下时的按钮背景颜色？

2 个答案: