javascript - 我如何正确地更改 React 中元素的样式，而不是在我更新状态时不断更改它？

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