Question

我的问题有点模棱两可，主要是因为我很难把正确的单词放在一起提出一个更精确的问题。但是，我认为我的例子应该很清楚。

我正在用React创建一个待办事项列表，当我向列表中添加待办事项时，它也具有内联标记颜色，使其看起来更“美观”。我希望这种颜色是我存储在数组中的随机颜色之一。

我的CodePen展示了我的结果中发生了什么的一个例子；一旦添加了带有标记颜色的任务，当添加第二个任务时，在输入的onChange属性上，由于状态改变，我的待办事项颜色开始发生变化，然后React重新渲染组件（在至少，我认为这就是正在发生的事情。如何防止这种情况，并在每个待办任务中存储一种随机颜色？

CodePen

Answer 1

将Todo添加到状态并将颜色放入状态时，例如在Todo对象本身上，您需要生成颜色。

例如，在addHandler中：

const currentTodo = this.state.currentTodo;
const markerColors = ['#F8C8C8', '#C0F5E6', '#C5C5F9', '#F5EFC0'];
currentTodo.color = markerColors[getRandomInt(0, markerColors.length)];

然后从createList函数中删除该代码，仅保留

const colorObj = {
  background: todo.color,
}

我在这里修改了您的Codepen：https://codepen.io/anon/pen/xQjpOv?editors=0010

我如何在React中正确更改元素的样式，而又不会在更新状态时使其不断变化？

1 个答案: