与 REACT (setState()) 斗争答案

【问题标题】：struggling with REACT (setState())与 REACT (setState()) 斗争
【发布时间】：2019-08-10 05:10:01
【问题描述】：

REACT 新手，问题很简单，有三个“颜色”按钮。单击一个时， h1 标记将更改为按钮颜色。 h1 的默认值为黑色。

const root = document.getElementById("root");


class ChangeColors extends React.Component {
  constructor() {
    super();
    this.state = { color: "black" };
  }
  render() {
    const styleChange = () => {
      this.setState({ color: this.state.color })
    }
    return (
      <div>
        <h1 style={style}>Change My Colour!</h1>
        <p>
          <button onClick={this.styleChange} style={color: 
  red}>Red</button>
          <button onClick={this.styleChange} style={color: 
    blue}>Blue</button>
          <button onClick={this.styleChange} style={color: 
   green}>Green</button>
        </p>
      </div>
    );
  }
}

ReactDOM.render(<ChangeColors />, root);

【问题讨论】：

标签： reactjs class state jsx

【解决方案1】：

您的代码中有很多语法错误，但这里有一个修复版本：https://codesandbox.io/s/62row8358z

【讨论】：

非常感谢！我会复习你所做的，以便我能理解。

【解决方案2】：

目前当this.styleChange被调用时，它会将状态设置为状态中的当前颜色。为了从按钮传递颜色，您需要将其添加为参数：

const styleChange = (newColor) => {
  this.setState({ color: newColor })
}
...
<h1 style={{ color: this.state.color }}>Change My Colour!</h1>
<button onClick={() => this.styleChange("red")} style={{ color: "red" }}>Red</button>
etc.

【讨论】：

【解决方案3】：

这是 React，在自动绑定的 React 事件处理程序（方法创建为箭头函数）中，this 是类实例（ChangeColors），而不是发生事件的元素（按钮）。

styleChange 处理程序必须在类级别声明，而不是在渲染方法中。

样式属性也必须这样写style={{ ...obj }}。因为非字符串，所以 jsx 值必须用{} 括起来，并且在 style 属性的情况下，值本身就是一个对象。

最后style属性中颜色的值必须是字符串，不加引号的红蓝绿css常量是行不通的。

const root = document.getElementById("root");


class ChangeColors extends React.Component {
  constructor() {
    super();
    this.state = { color: "black" };
  }
  styleChange = (evt) => {
      this.setState({ color: evt.target.style.color })
  }
  render() {
     
    return (
      <div>
        <h1 style={{ color: this.state.color}}>Change My Colour!</h1>
        <p>
          <button onClick={this.styleChange} style={{color: 'red' }}>Red</button>
          <button onClick={this.styleChange} style={{color: 'blue' }}>Blue</button>
          <button onClick={this.styleChange} style={{color: 'green' }}>Green</button>
        </p>
      </div>
   );
  }
}

ReactDOM.render(<ChangeColors />, root);

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

【讨论】：