Question

新的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);

Answer 1

您的代码中有很多语法错误，但这是固定版本：https://codesandbox.io/s/62row8358z

Answer 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.

Answer 3

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

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

还必须以这种方式编写样式属性style={{ ...obj }}。因为非字符串，因此jsx值必须用{}括起来，并且就样式属性而言，值本身就是一个对象。

最后，style属性中的color值必须为字符串，不带引号的红色，蓝色和绿色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>

挣扎与REACT（setState（））

3 个答案: