在更改组件的内联样式时反应错误

Question

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

错误：

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

profile.tsx

import * as React from 'react';

export default class Profile extends React.Component {

  public styler = {
        color:"white",
  }

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

  HandleMenuClick() {
    this.styler.color = 'gray'; // error on executing this line
  }

}

点击按钮时产生错误。

将样式移到类之外时会产生同样的错误：

var styler = {
    color:"white",
}

Answer 1

你应该在课堂上使用this 关键字。 但是要查看反应的变化，您应该使用state。

这是一个小例子：

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

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

  HandleMenuClick = () => {
    const { styler } = this.state;
    this.setState({styler: {
      ...styler,
      color: 'gray',
      backgroundColor: '#000'
    }})
  };
}

ReactDOM.render(<Profile />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

编辑
作为您评论的后续行动：

但出于好奇，我的 this.styler.color 变量永远不会改变 代码，我知道它不会调用渲染，但它甚至没有改变 代码中的变量，只是给出错误，这是为什么呢？

如上所述，您应该使用this 关键字将对象附加到class，这基本上只是sugar around the prototype pattern

JavaScript 类是在 ECMAScript 6 中引入的，并且是语法的 JavaScript 现有的基于原型的继承的糖。这 类语法没有引入新的面向对象继承 模型转换为 JavaScript。 JavaScript 类提供了一个更简单和 更清晰的语法来创建对象和处理继承。

在您的代码中，您使用了public 关键字，在这种情况下我不熟悉（这是一个错字吗？）+您应该在constructor 中初始化对象。

这里是一个对象被变异的例子：

class Profile extends React.Component {
  constructor(props) {
    super(props);

    this.myObject = {
      myKey: "Hi there!"
    };
  }

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

  HandleMenuClick = () => {
    console.log(this.myObject);
    this.myObject = {
      myKey: "Bye there!"
    };
    console.log(this.myObject);
  };
}

ReactDOM.render(<Profile />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

将您的代码更改为 -

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'}});
      }

    }