我如何正确更改 React 中元素的样式，而不会随着我更新状态而不断更改？答案

【问题标题】：How would I properly change the style of an element in React, without having it constantly change as I update state?我如何正确更改 React 中元素的样式，而不会随着我更新状态而不断更改？
【发布时间】：2018-11-24 09:19:48
【问题描述】：

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

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

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

CodePen

【问题讨论】：

标签： javascript css reactjs

【解决方案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,
}

我在这里修改了你的代码笔：https://codepen.io/anon/pen/xQjpOv?editors=0010

【讨论】：