使用按钮的颜色切换器

Question

在 React Developer 的面试中，我被要求做一个函数。我基本上是新手，我应该能够轻松做到这一点，但有一个问题。

创建一个颜色数组（作为字符串）。编写一个函数来创建颜色管理器。它应该只有方法（没有属性）：

● 获取 - returns 当前选择的颜色

● 下一个 - 切换到下一个颜色

● prev - 切换回之前的颜色

● 重置 - return 到原来的颜色

使用您制作的函数，您可以指定默认颜色。每个颜色管理器都应该有自己的颜色。

从我学习的教程来看，道具一直都是用的。我被困在这种情况下，所以任何帮助将不胜感激。

Answer 1

有多种方法可以实现这一点，这里是其中一种。基本上，我有 colorManager 函数，其中 returns 一个包含您描述的所有方法的对象。此函数有一个参数，即 defaultColor 参数。另外，我添加了 setPalette 方法，以防我们需要更灵活地更改预定义颜色列表。您还可以在下面看到所描述方法的用法和 colsole 输出。

function colorManager(defaultColor) {
  let stack = [defaultColor, "red", "green", "blue", "pink"];
  let index = 0;

  return {
    
    get: function () {
      return stack[index];
    },

    next: function () {
      index += 1;
      if (index >= stack.length) {
        index = 0;
      }

      return this.get();
    },

    prev: function () {
      index -= 1;
      if (index < 0) {
        index = stack.length - 1;
      }

      return this.get();
    },

    reset: function () {
      index = stack.indexOf(defaultColor);
      return this.get();
    },

    setPalette: function(colours) {
      stack = [defaultColor, ...colours]
    }
  };
}

const cm1 = colorManager("purple");

console.log(cm1.get()); // purple
console.log(cm1.next()); // red
console.log(cm1.next()); // green
console.log(cm1.prev()); // red
console.log(cm1.reset()); // purple

使用按钮的颜色切换器

Color Switcher using buttons

arrays

function

button

reactjs