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

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。

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

最后，如果你想要一个 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)，因此您需要将其包装在处理函数中。

您没有将任何值传递给changeBtncolor 函数内的setColour 函数，但您传递的是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>
  ));
}