Javascript 更改组件的内联样式时出现反应错误

我想在某个事件上更改组件元素的样式，如单击。但是当我这样做的时候，我得到了一个错误，即我的样式对象是只读的，而它没有被定义为只读的，因此是不可变的。即使在类之外定义样式对象也会产生相同的错误。下面我创建了一个简单的示例来说明我的问题

错误：

Uncaught TypeError: Cannot assign to read only property 'color' of object '#<Object>'

---

将代码更改为-

import * as React from 'react';

    export default class Profile extends React.Component {
      constructor()
      {
        super();
        this.state.styler = {
            color:"white"
          }
      }


      render() {
        return (<button style={this.styler} onClick={this.HandleMenuClick.bind(this)}>Click me!</button>);
      }

      HandleMenuClick() {
        this.setState({'styler' : {'color':'gray'}});
      }

    }

import*as React from'React'；
导出默认类配置文件扩展React.Component{
构造函数（）
{
超级（）；
this.state.styler={
颜色：“白色”
}
}
render（）{
返回（单击我！）；
}
HandleMenuClick（）{
setState（{'styler'：{'color'：'gray'}）；
}
}

在课堂上，你应该使用

这个

关键词但要查看react中的更改，应使用

状态

下面是一个小例子：

类配置文件扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
样式器：{
颜色：“白色”
}
}
}
render（）{
const{styler}=this.state；
返回(
点击我！
);
}
HandleMenuClick=（）=>{
const{styler}=this.state；
此.setState（{styler:{
…styler，
颜色：'灰色'，
背景颜色：“#000”
}})
};
}
render（，document.getElementById（“根”））

谢谢我知道我应该把所有东西都放在状态。但出于好奇，我的this.styler.color变量在代码中从未更改，我知道它不会调用render，但它甚至没有更改代码中的变量，只是给出了错误，为什么？@user1337604答案已更新，希望它为您清除一些内容。仅对我无效。请提出任何建议：
var styler = {
    color:"white",
}

import * as React from 'react';

    export default class Profile extends React.Component {
      constructor()
      {
        super();
        this.state.styler = {
            color:"white"
          }
      }


      render() {
        return (<button style={this.styler} onClick={this.HandleMenuClick.bind(this)}>Click me!</button>);
      }

      HandleMenuClick() {
        this.setState({'styler' : {'color':'gray'}});
      }

    }